🔥 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

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.

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
Follow

@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 (Aquilepouet)

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!