Morphing svg using Kute.js
How do I make an morphing svg using kute.js?
Morphing svg using kute.js. What is a morphing svg using kute.js? How do you make a morphing svg using kute.js? This script and codes were developed by Chris Maki on 24 August 2022, Wednesday.
Morphing svg using Kute.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>morphing svg using Kute.js</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <svg version="1.1" id="myIconSet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <path id="icon1" class="icon-1" fill="#00FFFF" d="M102.5,11.9L131.2,70L195.4,79.3L148.9,124.6L159.9,188.5L102.5,158.3L45.1,188.5L56.1,124.6L9.6,79.3L73.8,70Z"/> <path id="icon2" class="icon-2" style="visibility: hidden;" d="M146.5,15L51.5,15L4,97.3L51.5,179.6L146.5,179.6L194.1,97.3Z"/>
</svg>
<!-- <button class="btn">Morph</button> -->
</div> <script src='https://thednp.github.io/kute.js/src/kute.min.js'></script>
<script src='https://thednp.github.io/kute.js/src/kute-attr.min.js'></script>
<script src='https://thednp.github.io/kute.js/src/kute-svg.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Morphing svg using Kute.js - Script Codes CSS Codes
.container { width: 200px; margin: 4em auto;
}
svg { width: 200px;
}
.icon-1 {
/* fill: #00FFFF; */
}
.icon-2 {
/* fill: #E8BD5D; */
}
button { color: white; outline: 0; border: 0; background: aquamarine; padding: 1em 4em; margin: 5em auto;
}
/* box shad0w is costly here and messes with the animation*/
button:active { padding: 1em 3.9em 0.9em 4em;
/* box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.45); */
}
Morphing svg using Kute.js - Script Codes JS Codes
var btn = document.querySelector('.btn');
function morphIt() { var multiMorph1 = KUTE.to('#icon1', { path: '#icon2', attr: { fill: "#E8BD5D" } }, { morphPrecision: 10, morphIndex: 10, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut' }).start();
}
setInterval(morphIt, 4600);
//btn.addEventListener('click', morphIt);
Developer | Chris Maki |
Username | chrisMaki |
Uploaded | August 24, 2022 |
Rating | 3 |
Size | 2,417 Kb |
Views | 253,000 |
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 |
Css expanding search | 1,728 Kb |
Show dialogue with blur animation | 2,085 Kb |
Light bulb svg loader | 2,344 Kb |
Velocity fade in | 2,062 Kb |
A Pen by chris maki | 2,711 Kb |
Mutli-step form using GSAP | 4,226 Kb |
Simple Modal | 2,114 Kb |
Multiply blend mode on hover | 2,641 Kb |
Messing with GSAP | 2,506 Kb |
Mobile navigation using GSAP | 3,145 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 |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 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!