DEV Community

Cover image for A Typewriter, but with no HTML, CSS, or JS?!
Timothy Foster
Timothy Foster

Posted on • Updated on


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.

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">
    values="1; 0"
    repeatCount="indefinite" />
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (12)

alvaromontoro profile image
Alvaro Montoro

Nice 🙂

alvaromontoro profile image
Alvaro Montoro

Wait... No multiline? I may need to revoke the "nice" comment 😋

But seriously, this looks really nice. Good entry. And welcome to the "fight."

auroratide profile image
Timothy Foster

Lol, no multiline, hardcoded magic numbers, and the background has to be white! Truly the height of flexible code 😆

afif profile image
Temani Afif • Edited

oh, a new warrior!

PS: add some tags to your post to get some visibility (the #webdev and even #html can fit, also #codepen and the #SVG of course)

auroratide profile image
Timothy Foster

Thanks! Totally forgot to do that ^^'

thumbone profile image
Bernd Wechner

Nice. I like.

But I think it a tad extreme to claim no HTML. I mean the svg tag is... er, HTML, not?

_hs_ profile image

It's Schrödinger's tag. It's HTML and it's not. It's markup not HTML but HTML "supports" it. So if browser supports it while rendering it's HTML. But not really. I think you see how this could be series of blog posts by itself.

auroratide profile image
Timothy Foster

Technically, there's a clause in the HTML spec for the svg element; but, you could also save this as a literal *.svg file and load it up in a browser, hence HTML isn't necessary!

Or a different way of putting it, I technically used HTML to present it in this post, but only used features provided by the SVG specification 😊

coolscratcher profile image

Nah, that's considered SVG as it's present within an SVG file anyways I believe

grahamthedev profile image

Even my sacred SVG isn’t safe from people beating me to the punch.

Just so you know Temani normally needs a health warning on SVG stuff as the lack of CSS causes him pain! 🤣

darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Ah, SVG, very nice! It's probably one of the most underappreciated technologies on the web :D

brandonmcconnell profile image
Brandon McConnell

I created a CSS-only (no HTML or JS) typewriter 2½ years ago and feel it’s worth a mention… 👀

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.