DEV Community

loading...
Cover image for Animations without JS...or CSS...or IMAGES??!? ๐Ÿ˜ฒ Pure HTML animation!

Animations without JS...or CSS...or IMAGES??!? ๐Ÿ˜ฒ Pure HTML animation!

inhuofficial profile image InHuOfficial ใƒปUpdated on ใƒป2 min read

I recently created a countdown timer that used no JS, CSS or HTML.

Then I went one better and built a password generator in pure CSS (no JS!)

But now I have gone even more insane!

I present to you an animation that doesn't use any images....

An animation that doesn't use any CSS...

An animation that doesn't use any JavaScript....

It is all done with pure HTML!

Warning: If you experience epilepsy, motion sensitivity (vestibular disorders) or are using a screen reader, you probably shouldn't click the link....yet again this is a silly experiment that should never be used in the real world and unfortunately is not accessible!)

Click here to experience it in all of it's glory! (sorry I can't make it work on dev.to!)

Spoilers lie below so make sure you click the link and see it in action before scrolling down!

.
.
.
.
.
.
.
Spoilers in
.
.
.
.
.
.
3
.
.
.
.
.
.
2
.
.
.
.
.
.
1
.
.
.
.
.
.

Spoilers!

Rick Roll in ASCII text

Yes I did just Rick Roll you with ASCII text!

I title the piece "Rick ASCII-ly" (groan) ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ

So what is going on?

Super simple - there are 44 pages each with a different "frame" of our ASCII video.

Each frame is then set to automatically load the next page using <meta http-equiv="refresh" content="0; URL = {next image URL}">

The last page then points to the first page to create an infinite loop!

By setting the delay to 0 and with a fast enough connection (or when all the images are cached locally) it actually performs reasonably well (in fact it is a little bit too quick!)....it is just a shame I can't play audio as well!

FireFox

If you viewed it in Chrome originally you should also view it in FireFox, they seem to try and interpret the symbols with syntax highlighting (as they are displayed within a <pre> tag) so you get some (strange) colour for free!

Compatibility

This works all the way back to Netscape Navigator 1.1 - it is the most compatible animation format in the world! - I wonder if "caniuse" will add it to their database? ๐Ÿ˜‹๐Ÿคฃ

Why?

Does it have any practical uses? no.

Did it get me locked out of my server as it triggered Mod Sec with too many requests? Absolutely!

Is it a bit of fun on a Friday? Yes

So happy weekend people, you got rick rolled with ASCII text so I win the internet for today ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ!

Leave a comment if you hate me for this! ๐Ÿ˜œ

Oh and don't be afraid of sharing it on social media - I want to see if my server can cope with thousands of requests a second ๐Ÿ˜๐Ÿคฃ๐Ÿคฃ - a free stress test woohoo!

Discussion (38)

pic
Editor guide
Collapse
bezpowell profile image
BezPowell

This is an extremely creative use of html. I also like that you managed to come up with such an inefficient way of playing video - with all the talk on making video codecs perform better, with smaller bandwidth, surely there must also be a prize for the opposite?

Thank you for blowing my mind!

Collapse
inhuofficial profile image
InHuOfficial Author

I couldn't check it last night - it is 2.5kb per frame when gzipped for a 200 by 60 "resolution" image.

So it looks like you are right, I won't be able to roll this out as the future of video bandwidth saving ideas!

However you have given me an idea for a fun experiment for trying to write an "ASCII codec"....but that might be beyond my skills ๐Ÿคฃ

Collapse
bezpowell profile image
BezPowell

An ASCII codec could be really interesting. I suppose you could borrow the idea of meta-blocks, or do some kind of diff operation between frames?

I've not really looked into video compression at all, but that is a really interesting idea for a pet-project.

Thread Thread
inhuofficial profile image
InHuOfficial Author

It is one of those projects where you โ€œdo it badlyโ€ and then see how many clever algorithms etc a real codec uses and learn loads....added it for about 3 posts from now as I think it would be fun!

Thanks for the idea ๐Ÿ˜„

Collapse
inhuofficial profile image
InHuOfficial Author

Haha, with gzipping I would imagine the bandwidth usage is quite low ๐Ÿ˜œ๐Ÿคฃ๐Ÿคฃ

Collapse
inhuofficial profile image
InHuOfficial Author

I don't know why I am so proud of myself for using a 15 year old meme....I think it is the sheer effort converting the video to ASCII text that did it and the hour remembering how to get past Mod Sec when I locked myself out of my server that did it.

@afif I am so sorry to do the no CSS thing to you again bud!

Collapse
ingosteinke profile image
Ingo Steinke

Hi Graham, I clicked on your link before reading the spoiler, saw the artwork and started to understand ... and had to laugh out loud! Nice surprise! no wonder it does not work on dev.to though. Have a nice weekend!

Collapse
inhuofficial profile image
InHuOfficial Author

Haha thanks Ingo, I hope you have a great weekend too!

Collapse
adam_cyclones profile image
Adam Crockett

SVG SMIL it's animation without CSS or JavaScript

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

SVG is an image format...so that would be animation without CSS or JS - in which case I could also have just used a GIF ๐Ÿ˜‹

The article was pure HTML animation!

Collapse
adam_cyclones profile image
Adam Crockett

SVG is made of XML so is html so by the transit of properties ๐Ÿค” we are all winning here

Thread Thread
inhuofficial profile image
InHuOfficial Author

That is XHTML if we are going to try and squeeze it in (which never quite took off). I could make the document HTML 4 and then get away with it, but HTML != XML due to the fact you can declare a void element like this <br> or <hr> - that would break XML as it isn't self-closed!

SVG is also a separate spec to HTML so I don't think I could get away with it without it being clickbait!

However using SVG SMIL is going to be another part of this series of silly experiments with "clickbait" titles that turn out to not be clickbait! ๐Ÿ˜‰.

Thread Thread
adam_cyclones profile image
Adam Crockett

On the subject of clickbait titles.

Do X in Y time

X things you wouldn't Y

That's the magic right there ๐Ÿคฃ

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

I am practicing my clickbait titles - see if you like any of these (these are actual articles I am working on, just made the titles pure clickbait for you! ๐Ÿคฃ)

  • I downloaded every article on dev.to [246000 articles!] - here is what I learned (I actually did download every article - 9.3GB without images!)
  • Sorry guys, the results are in and SIZE DOES MATTER. (byte efficiency article)
  • A website without a single line of HTML? (part of this series!)
  • GDPR and cookie consent are making things LESS private (the new Google spying they are trialing)
  • 10 useful HTML elements your probably don't know (with a bonus one of course!)
  • The secret to a happy website is good <HEAD> (preloading etc.)

A couple of them might be a little too far ๐Ÿคฃ๐Ÿคฃ

Collapse
rplantiko profile image
Rรผdiger Plantiko

I like to be rickrolled this way! ๐Ÿ˜‰

btw: for developers, the words "ASCII" or "plain text" will never sound backward or retarded - as they do for the hipsters - but they will always feel like "the real thing".

Collapse
inhuofficial profile image
InHuOfficial Author

As long as it brought a smile to your face then it did itโ€™s job! ๐Ÿ˜„

Collapse
12944qwerty profile image
12944qwerty

How long did it take to you to make every single frame? And how did you get enough patience? Just... wow!!!

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

I automated it - you can split a gif easily online into frames. Then I just used canvas to turn the frame grey and apply letters depending on the lightness / darkness of a square.

The only manual part was copying the text into a page as I couldnโ€™t think of a way to automate that quicker than just copy and pasting.

Collapse
12944qwerty profile image
12944qwerty

Did you apply each letter by hand? Or did you make a program to detect that...

Thread Thread
inhuofficial profile image
InHuOfficial Author

Oh god know - the program had 8 characters to choose from that represented different darknesses for pixels. So a # is darker than a ( for example. It then just spit out a 200 by 60 string that I could copy and paste into a <pre> tag so it was evenly spaced

Collapse
naseki profile image
Naseki

Your posts lately have been having me like...

inhu

(jk I love you)

Collapse
inhuofficial profile image
InHuOfficial Author

That picture is awesome!

Glad my posts are inspiring strong feelings...they always say there is a fine line between love and hate ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ lets hope I stay on the right side of that line ๐Ÿ˜œ

Collapse
technoglot profile image
Amelia Vieira Rosado

Fell too hard for this one! You got me there, well played! ๐Ÿ˜‚๐Ÿ˜‚๐Ÿ˜‚

Collapse
inhuofficial profile image
InHuOfficial Author

Hehe, hopefully the beautiful ASCII art makes up for the disappointment of getting Rick rolled ๐Ÿ˜œ

Collapse
theowlsden profile image
Shaquil Maria

Getting rick-rolled by ASCII text... I'm down for it!๐Ÿ˜‚ Let the crazy continue! Happy weekend.

Collapse
inhuofficial profile image
InHuOfficial Author

I hope you have a great weekend too! ๐Ÿ˜„

Collapse
myleftshoe profile image
myleftshoe

Sure to be the next standard for web video! For some reason it reminds me of another 80s "icon" Samamtha Fox in the Commodore 64 game Samantha Fox Strip Poker. At least yours has motion.

Collapse
inhuofficial profile image
InHuOfficial Author

Well I can understand how you could associate the two - Rick Astley is just that sexy that he is bound to remind you of Samantha Fox ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ

And I totally agree - if all video was like this on the web I am sure the world would be a better place ๐Ÿ˜‹

Collapse
afif profile image
Temani Afif

After 10 years of research we finally found the ancestor of Youtube. You should publish this as a scientific paper ๐Ÿ˜œ

Collapse
inhuofficial profile image
InHuOfficial Author

Haha! Brilliant, made me chuckle! Have a great weekend!

Collapse
incrementis profile image
Akin C.

Hello InHuOfficial,

Thank you for your article!
Your Rick Roll was successful on me and I love a good joke.
It made me smile :)

Collapse
inhuofficial profile image
InHuOfficial Author

Hehe glad I โ€œgot youโ€ and it made you smile! Mission accomplished ๐Ÿ˜œ

Collapse
sywill profile image
William long II

Could load the animations in an iframe and add audio tag to get audio to play and still be pure html. I would think.

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

I did think this, in the brief test I did though it appeared the iframe did not like so many redirects, I might have a fiddle at some point and see if it was just a symptom of mod sec or something!

I suppose the issue is I then technically have 2 copyrighted works on my website ๐Ÿ˜œ

Collapse
theriusblackers profile image
Arturo Gamboa

Wow! it's surprising, funny, and extremely good. I didn't really understand it at first, then I saw how it worked and I started to laugh internally hehe ... obviously it won't run in dev.to XD

Collapse
inhuofficial profile image
InHuOfficial Author

If it made you smile then job done! Itโ€™s not immediately obvious as it is abusing the hell out of my server so nobody would normally do this to themselves ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ

Collapse
12944qwerty profile image
12944qwerty

I knew exactly what was about to happen before I clicked the link.... just the way you had put it there made it like that.