Shape morphing animations can be awfully cool. They can be artistic and elaborate like the waving cape of a brand character, or simple and understated like video player controls morphing from one state to another. Alexandru-Gabriel Ică digs into doing this in <svg>. There is a fairly big prerequisite to these kind of animations: the shapes need the same number of points. The trick is typically to use a <path d=""> which is capable of drawing anything, then force both shapes to have the same number of points even if you don’t need them all. Alexandru-Gabriel goes deep on this writing script to convert arbitrary paths into morphable shapes, which is the same kind of thing libraries like Greensock do. I love the idea that you can do the morph directly in CSS.
Featured
Simulating Crop Marks
Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on the web too, just for kicks.
