Animating donut chart in FramerJS

app.coffee

c =
	background: '#f0f0f0'
	foreground: 'blue'
	start: 10
	end: 90
	strokeWidth: 10
	speed: 50
	size: 100

circle = new Layer
	size: c.size
	borderRadius: c.size * 0.5
	clip: true
	rotation: -90
	backgroundColor: null
	html: """
		<svg viewBox="0 0 32 32">
			<circle 
				class="circle" 
				r="16" 
				cx="16" 
				cy="16" />
		</svg>
	"""
	style:
		'fill': c.background
		'stroke': c.foreground
		'stroke-width': c.strokeWidth
		'stroke-dasharray': "#{c.end} 100"
		'animation': "fillup #{c.speed}s linear forwards"

Utils.insertCSS """
	@keyframes fillup {
		from { stroke-dasharray: #{c.start} 100; }
	}
"""