SVG Morph: Octocat says Hi!

Developer
Eli Fitch
Size
4,520 Kb
Views
14,168
  1. SVG Morph: Octocat says Hi! Previews
  2. SVG Morph: Octocat says Hi! HTML Codes
  3. SVG Morph: Octocat says Hi! CSS Codes
  4. SVG Morph: Octocat says Hi! JS Codes

How do I make an svg morph: octocat says hi!?

Uses Greensock's SVG morph plugin to help octocat say hello to all her friends :). What is a svg morph: octocat says hi!? How do you make a svg morph: octocat says hi!? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.

SVG Morph: Octocat says Hi! Previews
IQ Test

SVG Morph: Octocat says Hi! - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Morph: Octocat says Hi!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.17 332.7"> <defs> <style> .cls-1 { fill: #9cdaf1; } .cls-2 { fill: #7dbbe6; } .cls-3 { fill: #f4cbb2; } .cls-4 { fill: #fff; } .cls-5 { fill: #ad5c51; } .cls-6 { fill: #c3e4d8; } </style> </defs> <title>octocat-color-blend</title> <g id="Layer_2" data-name="Layer 2"> <path id="puddle" class="cls-1" d="M296.9,295.4c0,20.5-47.6,37.2-106.2,37.2S84.5,316,84.5,295.4s47.6-37.2,106.2-37.2S296.9,274.9,296.9,295.4Z" transform="translate(0.05 0)"/> <g id="shadow-legs"> <path class="cls-2" d="M161.9,331.2V304.7a20.76,20.76,0,0,0-1.7-8.7c6.9,5.3,7.3,18.7,7.3,18.7v17c6.2,0.5,12.5.8,19.1,0.9l-0.2-16.9c-0.9-23.1-20.8-26-20.8-26-7.2-1.6-7.1,2-6.4,4.3-7.1-12.1-26.2-10.6-26.2-10.6-6.6,2.4-.5,6.6-0.5,6.6,10.4,3.8,11.3,15.1,11.3,15.1v23.6c5.8,1.1,11.8,1.9,18.1,2.5h0Z" transform="translate(0.05 0)"/> <path class="cls-2" d="M245.4,283.5s-19.1-1.6-26.2,10.6c0.7-2.4.8-6-6.4-4.3,0,0-19.8,2.8-20.8,26l-0.2,16.9c6.5,0,12.9-.3,19.1-0.7V314.8s0.5-13.4,7.3-18.7a22.45,22.45,0,0,0-1.7,8.7v26.8c6.2-.5,12.2-1.3,17.9-2.2V305.3s0.9-11.3,11.3-15.1c0.2-.1,6.3-4.4-0.3-6.7h0Z" transform="translate(0.05 0)"/> </g> <path id="catpath" d="M4.8,153.7c16.8-4.2,39.5-9.9,79.4-10.9-1.1-2.2-2.1-4.5-3-6.8-15.5-.1-63.4,2.1-79.7,6.1H1.2a1.29,1.29,0,0,1-1.2-.9,1.22,1.22,0,0,1,.9-1.5c16.2-4,62.9-6.2,79.4-6.2C76.7,122.5,75,109.9,75,96c0-24.9,7.7-34.2,18.1-47.5C85.2,20.1,96,.8,96,0.8S112.7-2.7,144.3,20c17.1-7.3,62.8-7.9,84.4-1.6C242,9.6,266.2-2.9,276,.6c2.6,4.3,8.4,16.7,3.5,44,3.3,6,20.6,18.8,20.7,54.8-0.3,13.3-1.7,24.5-4.2,34,41.2-.3,65.4,3.1,82.1,6.1a1.22,1.22,0,0,1,1,1.4,1.19,1.19,0,0,1-1.2,1h-0.2c-16.7-3.1-40.9-6.5-82.4-6.1a69.91,69.91,0,0,1-2.4,6.9c14.1,0.5,52.8,2,84.4,11.6a1.16,1.16,0,0,1,.8,1.5,1.29,1.29,0,0,1-1.2.9,0.76,0.76,0,0,1-.4-0.1c-32-9.8-71.6-11.1-84.8-11.6-11.5,25.2-34.9,34.6-72.9,38.5,12.3,7.7,15.8,17.5,15.8,43.8s-0.4,29.8-.3,35.9c0.1,9.9,14.7,14.7,14.1,17.9s-12.2,2.7-17.6.8c-15.4-5.4-13.9-18.2-13.9-18.2l-0.5-35.2s1.1-18.9-5.9-18.9v57.6c0,12.5,8.8,16.3,8.8,20.9,0,7.9-16-.8-20.9-5.7-7.5-7.5-6.7-23.5-6.5-36.2,0.2-12.2-.1-38.9-0.1-38.9l-5.1.1s2.1,58.4-2.7,69c-6.2,13.7-24.8,18.3-24.8,12.1,0-4.2,4.6-2.9,7.1-12.2,2.2-8,1.4-67.5,1.4-67.5s-6,3.5-6,14.7c0,5.1-.1,34.2-0.1,42.9,0,10.9-15.5,17.1-22.9,17.1-3.8,0-8.5-.2-8.5-2.2,0-5,14.2-8,14.2-18.5,0-9.1-.2-32.5-0.2-32.5a114.71,114.71,0,0,1-17.3,1.2c-25.7,0-33.8-16.4-37.7-25.6-5-11.9-11.6-17.6-18.5-22-4.3-2.7-5.2-6-.3-6.9,22.7-4.3,28.5,25.8,43.7,30.6,10.8,3.4,24.8,1.9,31.7-2.5,0.9-9.2,7.5-17.1,13-21.3-38.6-3.7-61.5-17.1-73.4-38.7-40.4,1-63.3,6.7-80.1,10.9l-3.6.9H1.4A1.4,1.4,0,0,1,.2,156a1.18,1.18,0,0,1,.9-1.5c1.3-.2,2.5-0.5,3.7-0.8" transform="translate(0.05 0)"/> <path id="wavepath" d="M4.8,153.7c16.8-4.2,39.5-9.9,79.4-10.9-1.1-2.2-2.1-4.5-3-6.8-15.5-.1-63.4,2.1-79.7,6.1H1.2a1.29,1.29,0,0,1-1.2-.9,1.22,1.22,0,0,1,.9-1.5c16.2-4,62.9-6.2,79.4-6.2C76.7,122.5,75,109.9,75,96c0-24.9,7.7-34.2,18.1-47.5C85.2,20.1,96,.8,96,0.8S112.7-2.7,144.3,20c17.1-7.3,62.8-7.9,84.4-1.6C242,9.6,266.2-2.9,276,.6c2.6,4.3,8.4,16.7,3.5,44,3.3,6,20.6,18.8,20.7,54.8-0.3,13.3-1.7,24.5-4.2,34,41.2-.3,65.4,3.1,82.1,6.1a1.22,1.22,0,0,1,1,1.4,1.19,1.19,0,0,1-1.2,1h-0.2c-16.7-3.1-40.9-6.5-82.4-6.1a69.91,69.91,0,0,1-2.4,6.9c14.1,0.5,52.8,2,84.4,11.6a1.16,1.16,0,0,1,.8,1.5,1.29,1.29,0,0,1-1.2.9,0.76,0.76,0,0,1-.4-0.1c-32-9.8-71.6-11.1-84.8-11.6-11.5,25.2-34.9,34.6-72.9,38.5,12.3,7.7,15.8,17.5,15.8,43.8s-0.4,29.8-.3,35.9c0.1,9.9,14.7,14.7,14.1,17.9s-12.2,2.7-17.6.8c-15.4-5.4-13.9-18.2-13.9-18.2l-0.5-35.2s1.1-18.9-5.9-18.9v57.6c0,12.5,8.8,16.3,8.8,20.9,0,7.9-16-.8-20.9-5.7-7.5-7.5-6.7-23.5-6.5-36.2,0.2-12.2-.1-38.9-0.1-38.9l-5.1.1s2.1,58.4-2.7,69c-6.2,13.7-24.8,18.3-24.8,12.1,0-4.2,4.6-2.9,7.1-12.2,2.2-8,1.4-67.5,1.4-67.5s-6,3.5-6,14.7c0,5.1-.1,34.2-0.1,42.9,0,10.9-15.5,17.1-22.9,17.1-3.8,0-8.5-.2-8.5-2.2,0-5,14.2-8,14.2-18.5,0-9.1-.2-32.5-0.2-32.5a114.71,114.71,0,0,1-17.3,1.2c-25.7,0-33.8-16.4-37.7-25.6-5-11.9-9.92-25.5-8-37.8,0.2-2.8,7.8-12.3,10.2-.2,6.6,25.9,8.42,32.8,22.72,39.7,10.8,3.4,24.8,1.9,31.7-2.5,0.9-9.2,7.5-17.1,13-21.3-38.6-3.7-61.5-17.1-73.4-38.7-40.4,1-63.3,6.7-80.1,10.9l-3.6.9H1.4A1.4,1.4,0,0,1,.2,156a1.18,1.18,0,0,1,.9-1.5c1.3-.2,2.5-0.5,3.7-0.8" transform="translate(0.05 0)"/> <path id="face" class="cls-3" d="M258.2,94.1c9.2,8.4,14.6,18.5,14.6,29.3,0,50.8-37.9,52.2-84.6,52.2s-84.6-7-84.6-52.2c0-10.8,5.3-20.8,14.4-29.2,15.2-13.9,40.9-6.5,70.1-6.5s54.9-7.4,70.1,6.4h0Z" transform="translate(0.05 0)"/> <path id="eyes" class="cls-4" d="M160.1,126.1c0,14-7.9,25.3-17.6,25.3s-17.6-11.3-17.6-25.3,7.9-25.3,17.6-25.3S160.1,112.1,160.1,126.1Zm94.4,0c0,14-7.9,25.3-17.6,25.3s-17.6-11.3-17.6-25.3,7.9-25.3,17.6-25.3S254.5,112.1,254.5,126.1Z" transform="translate(0.05 0)"/> <g> <path id="pupils" class="cls-5" d="M154.5,126.4c0,9.3-5.3,16.9-11.7,16.9s-11.7-7.6-11.7-16.9,5.3-16.9,11.7-16.9,11.7,7.5,11.7,16.9h0Zm94.4,0c0,9.3-5.3,16.9-11.7,16.9s-11.7-7.6-11.7-16.9,5.3-16.9,11.7-16.9,11.7,7.5,11.7,16.9h0Z" transform="translate(0.05 0)"/> <circle id="nose" class="cls-5" cx="188.55" cy="148.6" r="4.4"/> <path id="mouth" class="cls-5" d="M178.2,159.7a1.42,1.42,0,0,1,2.7-.9,8,8,0,0,0,7.6,5.3,8.1,8.1,0,0,0,7.6-5.3,1.56,1.56,0,0,1,1.8-.9,1.51,1.51,0,0,1,.9,1.8,10.8,10.8,0,0,1-10.2,7.2,11.16,11.16,0,0,1-10.4-7.2h0Z" transform="translate(0.05 0)"/> </g> <g id="blendCurveWave"> <path class="cls-6" id="blendCurveWave-1" d="M141.1,212.2c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveWave-2" d="M129.49,214.24c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveWave-3" d="M119.88,213.16c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveWave-4" d="M111.84,209.66c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveWave-5" d="M104.93,204.46c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveWave-6" d="M98.69,198.25c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveWave-7" d="M92.71,191.75c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveWave-8" d="M86.53,185.67c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveWave-9" d="M79.71,180.71c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> </g> <g id="blendCurveCat"> <path class="cls-6" id="blendCurveCat-1" d="M141.1,212.2c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveCat-2" d="M129.1,214.09c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveCat-3" d="M118.63,212.57c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveCat-4" d="M109.72,208.35c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveCat-5" d="M102.39,202.14c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveCat-6" d="M96.67,194.65c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveCat-7" d="M92.59,186.6c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveCat-8" d="M90.16,178.71c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> <path class="cls-6" id="blendCurveCat-9" d="M89.43,171.68c0,1.2-1.4,2.1-3.1,2.1s-3.1-.9-3.1-2.1,1.4-2.1,3.1-2.1,3.1,0.9,3.1,2.1h0Z" transform="translate(0.05 0)"/> </g> </g>
</svg> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Morph: Octocat says Hi! - Script Codes CSS Codes

html { padding: 3em;
}
svg { width: 30em;
}
#waveocto, #blendCurveWave, #catpath { display: none;
}

SVG Morph: Octocat says Hi! - Script Codes JS Codes

"use strict";
var body = document.getElementById("wavepath");
var curve = document.getElementById("blendCurveCat");
function animCurve() { for (var i = 1; i <= 9; i++) { TweenMax.to('#blendCurveCat-' + i, 0.25, { morphSVG: "#blendCurveWave-" + i, repeat: -1, yoyo: true, ease: Power1.easeInOut }); } TweenMax.to(body, 0.25, { morphSVG: "#catpath", repeat: -1, yoyo: true, ease: Power1.easeInOut });
}
animCurve();
SVG Morph: Octocat says Hi! - Script Codes
SVG Morph: Octocat says Hi! - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded October 28, 2022
Rating 4
Size 4,520 Kb
Views 14,168
Do you need developer help for SVG Morph: Octocat says Hi!?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eli Fitch (elifitch) Script Codes
Name
3D Retro Wave Spin
Cube of cubes
Animated SVG Hexagon
Diagonal gradient fill button
Slanty Button Mixin
Node DC Animated SVG Logo
Neon slicey cube
Canvas Hero Prototype
Goodbye 2016
Flexslider thumbnail modification
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!