🔥 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: codepen.io/stephaniewalter/ful

Follow

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

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 !

Sign in to participate in the conversation
mastodon.design

A Mastodon instance for and by people who make things!