This is a collection of experiments built with CSS animations and SVG graphics—demonstrating how much can be achieved with just code and a few vectors.
My goal here was to have fun, explore visual rhythm, and test techniques I can later use for standalone motion pieces or as part of UI interaction work.
You can explore the code and more experiments like these on my codepen profile
This one stacks multiple animation layers: SVG gradients, stroke-dasharray
and stroke-dashoffset
. Each path and the full group animate in sync to create a glowing, pulsing effect.
A first logo draft for a co-founded studio—styled in CSS to evoke a 90s TV animation aesthetic.
The bounce comes from a custom cubic-bezier
timing function.
I wanted an organic, breathing effect.
Subtle use of scale
and translate
on each path, controlled by CSS custom properties, brings motion to every stroke.
Using delay stacks and custom properties to achieve the frame-by-frame appearance.
The grainy look comes from layering texture and careful easing to simulate analog imperfection.