Animated SVG Path
How do I make an animated svg path?
Experimental Javascript / SVG Animation using Snap.svg with easing[Animated SVG Path with Jquery Callback][1]. What is a animated svg path? How do you make a animated svg path? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.
Animated SVG Path - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated SVG Path</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <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> <h1><b>Animated</b> SVG Paths <small>with Easing</small></h1>
<div class="col4">
<h2>SVG A</h2>
<svg id="svgA" width="100%" height="100%" viewBox="0 0 620 120" preserveAspectRatio="xMidYMid meet"></svg>
</div>
<div class="col4">
<h2>SVG B</h2>
<svg id="svgB" width="100%" height="100%" viewBox="0 0 620 120" preserveAspectRatio="xMidYMid meet"></svg>
</div>
<div class="col4">
<h2>SVG C</h2>
<svg id="svgC" width="100%" height="100%" viewBox="0 0 620 120" preserveAspectRatio="xMidYMid meet"></svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://oss.maxcdn.com/libs/snapsvg/0.1.0/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated SVG Path - Script Codes CSS Codes
html, body { height: 100%; padding: 25px; font-family: "Open Sans", cursive; background: #79b0a9; background: -webkit-linear-gradient(135deg, #79b0a9 0%, #79b096 100%); background: -moz-linear-gradient(135deg, #79b0a9 0%, #79b096 100%); background: -o-linear-gradient(135deg, #79b0a9 0%, #79b096 100%); background: linear-gradient(135deg, #79b0a9 0%, #79b096 100%); /* W3C */
}
html { padding: 0;
}
h1, h2 { font-family: "Open Sans", sans-serif; color: #fff; font-size: 32px; font-weight: 100; margin-bottom: 20px;
}
h1 b, h2 b { font-weight: 600;
}
h1 small, h2 small { font-weight: 300; font-size: 15px; color: #262a2b;
}
h1 { margin-top: 0;
}
h2 { font-size: 18px; margin-bottom: 10px;
}
.col4 { width: 33%; float: left; display: inline; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
svg { float: left; display: inline; background: rgba(255, 255, 255, 0.1); width: 100%; max-width: 580px; height: 200px; padding: 50px; border: 3px solid rgba(255, 255, 255, 0.3); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
Animated SVG Path - Script Codes JS Codes
// ---------
// SVG A
// --------- var snapA = Snap("#svgA"); // SVG A - "Squiggly" Path var myPathA = snapA.path("M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1").attr({ id: "squiggle", fill: "none", strokeWidth: "4", stroke: "#ffffff", strokeMiterLimit: "10", strokeDasharray: "9 9", strokeDashOffset: "988.01" }); // SVG A - Draw Path var len = myPathA.getTotalLength(); // SVG1 - Animate Path myPathA.attr({ stroke: '#fff', strokeWidth: 4, fill: 'none', // Animate Path "stroke-dasharray": "12 6", "stroke-dashoffset": len }).animate({"stroke-dashoffset": 10}, 2500,mina.easeinout); // SVG A - Circle var CircleA = snapA.circle(32,32,16); CircleA.attr({ fill: "#3f4445", stroke: "#fff", strokeWidth: 2 }); setTimeout( function() { Snap.animate(0, len, function( value ) { movePoint = myPathA.getPointAtLength( value ); CircleA.attr({ cx: movePoint.x, cy: movePoint.y }); // move along path via cx & cy attributes }, 2500,mina.easeinout); });
// ---------
// SVG B
// --------- var snapB = Snap("#svgB"); // SVG B - "Squiggly" Path var myPathB = snapB.path("M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1").attr({ id: "squiggle", fill: "none", strokeWidth: "4", stroke: "#ffffff", strokeMiterLimit: "10", strokeDasharray: "9 9", strokeDashOffset: "988.01" }); // SVG B - Draw Path var lenB = myPathB.getTotalLength(); // SVG B - Animate Path myPathB.attr({ stroke: '#fff', strokeWidth: 4, fill: 'none', // Draw Path "stroke-dasharray": lenB + " " + lenB, "stroke-dashoffset": lenB }).animate({"stroke-dashoffset": 10}, 2500,mina.easeinout); // SVG B - Circle var CircleB = snapB.circle(16,16,8); CircleB.attr({ fill: "#3f4445", stroke: "#fff", strokeWidth: 2 }); setTimeout( function() { Snap.animate(0, lenB, function( value ) { movePoint = myPathB.getPointAtLength( value ); CircleB.attr({ cx: movePoint.x, cy: movePoint.y }); // move along path via cx & cy attributes }, 2500,mina.easeinout); });
// ---------
// SVG C
// --------- var snapC = Snap("#svgC"); // SVG C - "Squiggly" Path var myPathC = snapC.path("M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1").attr({ id: "squiggle", fill: "none", strokeWidth: "4", stroke: "#ffffff", strokeMiterLimit: "10", strokeDasharray: "9 9", strokeDashOffset: "988.01" }); // SVG C - Draw Path var lenC = myPathC.getTotalLength(); // SVG C - Animate Path myPathC.attr({ stroke: '#fff', strokeWidth: 4, fill: 'none', // Draw Path "stroke-dasharray": "12 6", "stroke-dashoffset": "180" }).animate({"stroke-dashoffset": 10}, 4500,mina.easeinout); // SVG C - Triangle (As Polyline) var Triangle = snapC.polyline("0,30 15,0 30,30"); Triangle.attr({ id: "plane", fill: "#fff" }); var triangleGroup = snapC.g( Triangle ); // Group polyline setTimeout( function() { Snap.animate(0, lenC, function( value ) { movePoint = myPathC.getPointAtLength( value ); triangleGroup.transform( 't' + parseInt(movePoint.x - 15) + ',' + parseInt( movePoint.y - 15) + 'r' + (movePoint.alpha - 90)); }, 4500,mina.easeinout); });
Developer | Matt Litherland |
Username | mattsince87 |
Uploaded | August 03, 2022 |
Rating | 4.5 |
Size | 3,853 Kb |
Views | 56,672 |
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 |
Better Bootstrap Buttons | 2,955 Kb |
Ultimate Pop-Out Menu | 4,264 Kb |
Share Your Profile | 3,387 Kb |
SCSS Social Icons Flat | 3,482 Kb |
Animated Resposnive SVG Path | 5,339 Kb |
SVG Firework Animation | 3,306 Kb |
Flat Origami Article | 3,581 Kb |
Animated CSS3 Mobile Phone | 4,609 Kb |
Wishlist Toggle Button | 3,774 Kb |
Smooth Anchor Scrolling | 4,508 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 |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Hello People | Danburrows | 2,365 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!