<div class="demo">
  <div class="demo__content">

    <svg class="svg svg--nosizes" 
         viewBox="0 0 150 150">
        <circle r="60" cx="75" cy="75"
                fill="hsla(50, 100%,50%,.5)"
                stroke="black" stroke-width="1"/>
    </svg>
  </div>

</div>

// https://codepen.io/yoksel/pen/GvMRwB

// Required
// 1. tinyLib:
// https://codepen.io/yoksel/pen/KMgMvw
// 2. demosBuilder:
// https://codepen.io/yoksel/pen/JKRKyy

console.clear();

var $ = tinyLib;

var config = {
  demoContentLayout: 'both-ranges',
  targetElem: $.get( '.svg' ),
  resizeable: true,

  inputs: {
    ranges: {
      units: '',
        isTied: true,

      attrs: {
        type: 'range',
        min: 0,
        max: 300,
        step: 1,
        value: 200,
      },

      list: [
        {
          id: 'hor',
          valName: 'width'
        },
        {
          id: 'vert',
          valName: 'height',
        }
      ]
    }
  }
};

demosBuilder.create();