Mega fun times yay with Shape Morphing

The web supports this cool image format called SVG

It's vector graphics on the web!

You make art and logos for corporations and shit and it saves them as geometry.

<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"
/>

This is the geometry part.

It tells the computer to draw lines certain ways to certain places and to please do a good job.

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

Slightly lesser known fact:

you can animate shapes too! 

whaaaaaaat

You know it's cool and fresh because YouTube does it.

Transitioning characteristics of an interface element rather than abruptly changing them reduces cognitive dissonance and increases user understanding. blahbiddy blah blah blah blahhide.

 

- probably a smart scientist person

Not only can you animate shapes, you can get all kinda fancy with it.

This is the kind of boring garbage I do with it.

Maybe measuring customer satisfaction?

Maybe a progress bar?

Maybe charts and graphs?

p.s what is the difference between a chart and a graph?

Maybe a countdown?

The original old school kinda way to do with with SMIL and <animate>

<svg>

  <polygon points=" ... shape 1 points ... ">

    <animate 

      attributeName="points" 
      dur="500ms"
      to=" ... shape 2 points ... " 

    />

  </polygon>

</svg>

Two things are bummersville about this:

  1. SMIL is doomed
  2. The have to have the exact same number of points

There is a Greensock plugin for morphing that is wicked nice.

  1. Can be any shape
  2. Can have any number of points
  3. Works everywhere
  4. More control over how things morph
var morph = new TimelineMax({paused:true});

morph.to(
  "#gear", 
  1, { 
    morphSVG: "#x", 
    ease:Power1.easeInOut 
  }
);

Go forth and morph!

@chriscoyier

@codepen