Apparently a battle of sorts has erupted amongst devs clamoring for the title of Best Typewriter Animator Person.
- @alvaromontoro started with a Typewriter effect in CSS
- @afif then gave us A scalable CSS only Typewriter Effect
- @inhuofficial has promised us an HTML-only typewriter
- And @alvaromontoro came back with an Animated no-element typewriter
Behold, the power of Scalable Vector Graphics.
Ok but actually don't use this if you want a typewriter animation! It's got browser compatibility and accessibility issues, but at least it's a cute experiment.
The SVG spec has something called Synchronized Multimedia Integration Language (SMIL) which allows animations to be defined in the XML document directly.
For example, consider the animate tag. When made a child of some shape like
rect, you can choose what attribute to animate over time and specify the way in which it changes.
So for example, the text cursor is given a simple blink animation just by adjusting the width of a rectangle between 0 and 1, and doing it discretely so it blinks:
<rect fill="black" x="0" y="4" width="1" height="12"> <animate attributeName="width" calcMode="discrete" values="1; 0" dur="1s" repeatCount="indefinite" /> </rect>
This is the first time I've ever used SMIL, so almost certainly someone smarter than me can find a better way than adjusting an overlaying white rectangle!