SVG Morph: Octocat says Hi!
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! - 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();
Developer | Eli Fitch |
Username | elifitch |
Uploaded | October 28, 2022 |
Rating | 4 |
Size | 4,520 Kb |
Views | 14,168 |
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!
Name | Size |
Cube of cubes | 6,112 Kb |
Slanty Button Mixin | 4,109 Kb |
Neon slicey cube | 5,020 Kb |
Animated multi-line underline | 3,247 Kb |
Goodbye 2016 | 5,786 Kb |
3D Retro Wave Spin | 5,825 Kb |
Node DC Animated SVG Logo | 4,055 Kb |
Diagonal gradient fill button | 4,860 Kb |
Smiley guy | 3,845 Kb |
Gradient Borders Mixin | 3,394 Kb |
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!
Name | Username | Size |
404 Error Page | WebSonick | 3,203 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!