Message typing effect

index.html

<svg width="80" height="50">
	<circle id="lc" cx="10" cy="25" r="10"/>
	<circle id="cc" cx="40" cy="25" r="10"/>
	<circle id="rc" cx="70" cy="25" r="10"/>
</svg>

<script>
	const animate = () => {
		lc.setAttribute('cy', centreY + amplitude * Math.sin(time));
		cc.setAttribute('cy', centreY + amplitude * Math.sin(time - 1));
		rc.setAttribute('cy', centreY + amplitude * Math.sin(time - 2));
		time += 0.15;
		requestAnimationFrame(animate);
	}
	let time = 0;
	const centreY = 25;
	const amplitude = 15;
	animate();
</script>