Five minutes on Shape Morphing

The Web supports this cool image format called SVG

It's vector graphics on the web!

<path 
  id="icon-check" 
  d="M34.357,91.176L0,56.604L16.687,
     39.81l18.157,18.264l48.954-49.25L100,
     25.125L34.357,91.176z"
/>

You can animate stuff on the web. Here I'm animating position and color.

Slightly less known fact:

you can animate shapes too! 

You know it's cool because YouTube does it.

(But really, it can be cool for increasing understanding of what's happening in a user interface. Instant change = hey what happened! Morphed change = people see exactly what happened.)

Easing!

Go forth and morph!

Five Minutes with Shape Morphing

By chriscoyier

Five Minutes with Shape Morphing

  • 7,355
Loading comments...

More from chriscoyier