<style>
	#msvg {
		display: block;
		margin: auto;
		border: 1px solid gray;
		polygon {
			stroke-dasharray: var(--len);
			stroke-dashoffset: var(--len);
			animation: draw 6s linear forwards;
		}
	}
	@keyframes draw { to { stroke-dashoffset: 0; } }
</style>

<svg id="msvg" width="600" height="600" viewBox="-200 -200 400 400"></svg>

<script type="module">
	import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
	var dr = Dr.dr(msvg);

	var points = dr.sun(35, 200, 190);
	dr.polygon(points, 'none', 'red', 1).set('fill-rule', 'evenodd');
	var len = dr.elm.getTotalLength();
	dr.elm.style.setProperty('--len', len);
	dr.elm.onanimationend = () => dr.elm.setAttribute('fill', 'pink');
</script>