pm-controls
Version:
ProModel Controls
87 lines • 3.47 kB
HTML
<!-- <div>
<svg width="102" height="168" aria-label="A chart." style="overflow: hidden;">
<defs id="defs"></defs>
<g>
<path d="M51,53.400000000000006L51,33A51,51,0,0,1,99.50388233105284,99.75986671312232L80.1023293986317,93.45592002787339A30.599999999999998,30.599999999999998,0,0,0,51,53.400000000000006"
stroke="none"
stroke-width="0"
fill="#303f9f"></path>
</g>
<g>
<path d="M28.6935600009048,63.05285855858214L13.822600001508,49.08809759763689A51,51,0,0,1,51,33L50.99999999999999,53.400000000000006A30.599999999999998,30.599999999999998,0,0,0,28.6935600009048,63.05285855858214"
stroke="none"
stroke-width="0"
fill="#fb8c00"></path>
</g>
<g>
<path d="M21.361355269463893,91.60991054724455L1.6022587824398187,96.6831842454076A51,51,0,0,1,13.822600001508,49.08809759763689L28.6935600009048,63.05285855858214A30.599999999999998,30.599999999999998,0,0,0,21.361355269463893,91.60991054724455"
stroke="none"
stroke-width="0"
fill="#ffca28"></path>
</g>
<g>
<path d="M49.07861010240302,114.5396178899051L47.79768350400503,134.89936314984186A51,51,0,0,1,1.6022587824398187,96.6831842454076L21.361355269463893,91.60991054724455A30.599999999999998,30.599999999999998,0,0,0,49.07861010240302,114.5396178899051"
stroke="none"
stroke-width="0"
fill="#43a047"></path>
</g>
<g>
<path d="M80.1023293986317,93.45592002787339L99.50388233105284,99.75986671312232A51,51,0,0,1,47.79768350400503,134.89936314984186L49.07861010240302,114.5396178899051A30.599999999999998,30.599999999999998,0,0,0,80.1023293986317,93.45592002787339"
stroke="none"
stroke-width="0"
fill="#f44336"></path>
</g>
<g></g>
</svg>
<div>labels</div>
</div> -->
<svg width="100%"
height="100%"
viewBox="0 0 42 42"
class="donut"
role="img">
<circle class="donut-hole"
cx="21"
cy="21"
r="15.91549430918954"
fill="#fff"
role="presentation"></circle>
<circle class="donut-ring"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="#2196f3"
stroke-width="8"
role="presentation"></circle>
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="#f44336"
stroke-width="8"
stroke-dasharray="40 60"
stroke-dashoffset="25">
</circle>
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="#43a047"
stroke-width="8"
stroke-dasharray="20 80"
stroke-dashoffset="85">
</circle>
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="#9c27b0"
stroke-width="8"
stroke-dasharray="30 70"
stroke-dashoffset="65">
</circle>
</svg>