<div id=chart>
<div id=chart-shape>⬠</div>
<div id=chart-value></div>
</div>
#chart-shape {
font: 300px/300px serif;
text-align: center;
color: limegreen;
}
#chart-value {
background: conic-gradient(transparent 75%, darkseagreen 75%);
mix-blend-mode: screen;
}
#chart {
width: 300px;
height: 300px;
display: grid;
margin: auto;
margin-top: calc(50vh - 150px);
background: white;
}
#chart * {
height: inherit;
grid-area: 1 / 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.