<svg width="20vw" height="20vw" view-box="25 25 50 50">
<circle class="path" cx="40" cy="40" r="20" fill="green"></circle>
<circle class="path" cx="40" cy="40" r="17" fill="#fff"></circle>
</svg>
<br />
<svg width="20vw" height="20vw" viewBox="0 0 20 10">
<rect x="0" y="0" width="20" height="10" fill="green"></rect>
</svg>
body {
margin: 0;
}
rect {
transition: width ease-in-out 1s;
}