A Typewriter, but with no HTML, CSS, or JS?!

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

In the classic spirit of one-uppery that has arisen, it was only a matter of time before someone, somewhere took on the most legendary of tasks: to create a typewriter animation for the web without using anything. No Javascript. No CSS. Not even HTML.

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.

How it works

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!