Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 29, 2021 07:49 pm GMT

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">  <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!


Original Link: https://dev.to/auroratide/a-typewriter-but-with-no-html-css-or-js-1bgd

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To