Morphing dinosaurs

Click a button to select a dinosaur!

How?

Create SVG paths with identical nodes and starting node. Make sure all paths are absolute. Use this tool to convert relative to absolute paths

The animations are implemented using anime.js:

import anime from "animejs";          // Import library

const common = {                      // Common animation settings
  easing: "easeOutElastic(1,0.7)",    // Easing function, elastic
  duration: 800,                      // Duration of animation
  loop: false,                        // Don't loop
};

function morph() {                    // Function to transform dinosaur
  anime({                             // Call anime.js object to animate
    ...common,                        // Common settings (see above)
    targets: "#...",                  // Target object id
    d: "...",                         // New Path
    fill: "...",                      // New fill colour
  });
}