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
    });
  }