Animated Resposnive SVG Path

Developer
Matt Litherland
Size
5,339 Kb
Views
40,480
  1. Animated Resposnive SVG Path Previews
  2. Animated Resposnive SVG Path HTML Codes
  3. Animated Resposnive SVG Path CSS Codes
  4. Animated Resposnive SVG Path JS Codes

How do I make an animated resposnive svg path?

This is an Animated (responsive) SVG Path with a Jquery Callback all using the awesome [SnapSVG][1] library! I've been playing with this library for about a month and this is what i've managed to come up with so far.. What is a animated resposnive svg path? How do you make a animated resposnive svg path? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Animated Resposnive SVG Path Previews
IQ Test

Animated Resposnive SVG Path - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Resposnive SVG Path</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Responsive Animated <b>SVG Path</b></h1>
<button class="btn" id="nin">Animate</button>
<br />
<div id="svg-container"> <svg id="svgC" width="100%" height="100%" viewBox="0 0 620 120" preserveAspectRatio="xMidYMid meet"></svg>
</div>
<div id="ball"></div>
<div id="text"> <p>The above example is a <b>responsive</b> animated path and object along path with a Jquery callback function using the <b>SnapSVG Library</b> and <b>Jquery</b>.</p> <p><small><i>This is still currently a work in progress but please feel free to use and/or ask questions in the comments.</i></small></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.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 Resposnive SVG Path - Script Codes CSS Codes

html, body { padding: 0; margin: 0; width: 100%; height: 100%;
}
body { margin: 0; text-align: center; padding: 25px; font-family: "Open Sans", sans-serif; background: #2c539e; background: -moz-linear-gradient(-45deg, #2c539e 0%, #63967d 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #2c539e), color-stop(100%, #63967d)); background: -webkit-linear-gradient(-45deg, #2c539e 0%, #63967d 100%); background: -o-linear-gradient(-45deg, #2c539e 0%, #63967d 100%); background: -ms-linear-gradient(-45deg, #2c539e 0%, #63967d 100%); background: linear-gradient(135deg, #2c539e 0%, #63967d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#63967d',GradientType=1 ); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
h1, h2 { font-family: "Open Sans", sans-serif; color: #fff; font-size: 26px; 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;
}
p { line-height: 26px; color: rgba(255, 255, 255, 0.9);
}
code { color: #f2f23a;
}
#ball { display: block; height: 50px; width: 50px; border-radius: 25px; margin: 50px auto; background: white;
}
#ball.red { -webkit-animation: powpow 0.75s ease forwards; -moz-animation: powpow 0.75s ease forwards; -o-animation: powpow 0.75s ease forwards; animation: powpow 0.75s ease forwards;
}
@-webkit-keyframes powpow { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(1.2); } 50% { -webkit-transform: scale(1); } 75% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes powpow { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(1.2); } 50% { -moz-transform: scale(1); } 75% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); }
}
@-o-keyframes powpow { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(1.2); } 50% { -o-transform: scale(1); } 75% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); }
}
@keyframes powpow { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.2); transform: scale(1.3); } 50% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
#text { width: 80%; max-width: 640px; margin: 0 auto;
}
#svg-container { background: rgba(255, 255, 255, 0.1); width: 90%; max-width: 640px; margin: 0 auto; height: 120px; padding: 10px 0; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 10px;
}
#svgC { padding: 20px; margin: 0 auto; width: 80%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.btn { display: inline-block; text-decoration: none; position: relative; background: #5a89bd; border-radius: 5px; color: #fff; padding: 8px 16px; border: none; box-shadow: 0 3px 0px #304c6c; margin: 0 10px 20px 0; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.2s ease;
}
.btn:active { box-shadow: 0 0px 0px #304c6c; top: 3px;
}
button.disabled,
button[disabled],
button[disabled="disabled"] { opacity: 0.5; cursor: not-allowed;
}
button.disabled:active,
button[disabled]:active,
button[disabled="disabled"]:active { top: 0; border-bottom: 3px solid #304c6c;
}

Animated Resposnive SVG Path - Script Codes JS Codes

// Pen JS Starts Here
jQuery(document).ready(function(){ // --------- // SVG 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: "12 6", strokeDashOffset: "180" }); // SVG C - Triangle (As Polyline) var Triangle = snapC.polyline("0, 30, 15, 0, 30, 30"); Triangle.attr({ id: "plane", fill: "#fff" }); initTriangle(); // Initialize Triangle on Path function initTriangle(){ var triangleGroup = snapC.g( Triangle ); // Group polyline movePoint = myPathC.getPointAtLength(length); triangleGroup.transform( 't' + parseInt(movePoint.x - 15) + ',' + parseInt( movePoint.y - 15) + 'r' + (movePoint.alpha - 90)); } // SVG C - Draw Path var lenC = myPathC.getTotalLength(); // SVG C - Animate Path function animateSVG() { myPathC.attr({ stroke: '#fff', strokeWidth: 4, fill: 'none', // Draw Path "stroke-dasharray": "12 6", "stroke-dashoffset": "180" }).animate({"stroke-dashoffset": 10}, 4500,mina.easeinout); 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, function(){ alertEnd(); }); }); } // Callback Function function alertEnd(){ // Do Animation $('#ball').addClass('red'); // Enable Button $('#nin').removeAttr('disabled'); } // Animate Button function kapow(){ $("#nin").click(function(event){ // Disable Button $(this).attr('disabled','disabled'); // Animate Ball if ($('#ball').hasClass('red')){ $('#ball').removeClass('red'); } // Run SVG animateSVG(); }); } kapow();
});
Animated Resposnive SVG Path - Script Codes
Animated Resposnive SVG Path - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 5,339 Kb
Views 40,480
Do you need developer help for Animated Resposnive SVG Path?

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!

Matt Litherland (mattsince87) Script Codes
Name
Better Bootstrap Buttons
Gradient over Google Maps
Responsive Flat UI Kit
SVG Firework Animation
SCSS Social Icons Flat
Responsive Flot Chart
Wishlist Toggle Button
Google Inspired CSS Preloader
Share Your Profile
Animated CSS3 Mobile Phone
Create amazing video scripts 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!