<div id=chart></div>
#chart{
width: 300px;
height: 300px;
margin: auto;
margin-top: calc(50vh - 150px);
background:
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><html xmlns='http://www.w3.org/1999/xhtml'><div style='border:150px solid white; border-bottom:300px solid lime; border-top:unset'></div><div style='border:150px solid transparent; border-bottom:300px solid white; border-top:unset; transform:scale(0.8) translateY(-360px);'></div></html></foreignObject></svg>"),
conic-gradient(transparent 75%, darkseagreen 75%);
background-blend-mode: screen;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.