/lab

Lab(07)

Small experiments in motion, interaction and SVG. Things I build to understand how they work.

JavaScript: 7Python: 22GoLang: 5Rust: 1Java: 13
01

Fey chart

  • SVG
  • SMIL
  • React

A radar chart in the style of Fey, built with plain SVG. Hit Shuffle.

02

Keycaps

  • CSS
  • React

Azul, hello in Tamazight. Type it on your keyboard.

03

Shimmer button

  • CSS

A glossy button for the one action you want people to notice.

04

Like button

  • CSS
  • React

A like button that celebrates a little.

Hold to inhale · release to exhale

05

Inhale & exhale

  • CSS
  • React

A button that rewards you for holding on.

06

Menu icon

  • SVG
  • CSS

I cheated on this one. Each bar and one arm of the X are a single stroke, and sliding the dash along it does the morph.

07

Download icon

  • SVG
  • SMIL
  • React

The tray is a real path morph. SMIL blends it between two shapes that share the same path commands.