DEV Community

Discussion on: Animations without JS...or CSS...or IMAGES??!? 😲 Pure HTML animation!

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
 
grahamthedev profile image
GrahamTheDev • 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
 
grahamthedev profile image
GrahamTheDev

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