🔥 I finished my CSS transition & animation demo, 100% CSS + SVG + HTML.
Left is a transition between day/night, built with CSS transition. Right is built with CSS animations. All fully responsive.

👀 codepen demo if you want to look at the code:

You can unroll those for the whole "step by step process"
TLDNR: I drew the illustrations with Adobe Illustrator iPad beta, exported those to SVG then hand coded it all in codepen.

Show thread

I hesitate between writing a short article or recording a tutorial video to highlight some of the fun parts and some of the "stuff about SVG I wish I knew before starting coding this", there's fun things going on with CSS variables and some clamp units :)

Show thread

@stephaniewalter It would be amazing. I have learned so much by looking at the code already. Huge thanks.

@stephaniewalter un texte est toujours plus accessible et plus facilement partage. Une video peut etre interessante si l'on voit bien le code et le rendu (un peu comme le fait grafikart entre autre). Encore merci pour le partage !

@stephaniewalter This is awesome! Did you use any specific software to help you, or did you code the animation by hand?

@lertsenem I drew the illustrations with adobe illustrator iPad, exported as SVG and then handcoded it all :)

Sign in to participate in the conversation

A Mastodon instance for and by people who make things!