SVG Animated Stroke Dash

Developer
Jon Christensen
Size
3,623 Kb
Views
74,888
  1. SVG Animated Stroke Dash Previews
  2. SVG Animated Stroke Dash HTML Codes
  3. SVG Animated Stroke Dash CSS Codes
  4. SVG Animated Stroke Dash JS Codes

How do I make an svg animated stroke dash?

Using GSAP to animate a stroke dash offset of an SVG. Controls allow it to go infinitely in either direction fast or slow.. What is a svg animated stroke dash? How do you make a svg animated stroke dash? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

SVG Animated Stroke Dash Previews
IQ Test

SVG Animated Stroke Dash - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animated Stroke Dash</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" href="css/style.css">
</head>
<body> <h1>SVG Animated Stroke Dash</h1>
<h2>Animate with SVG baby!</h2>
<p>Simple proof of concept to demonstate animating the stroke infinitely and dynamically change its speed and direction with GSAP.</p>
<div class="container"> <button id="button1" type="button">Speed up!</button> <button id="button2" type="button">Slow down!</button> <button id="button3" type="button">Reverse!</button> <button id="button4" type="button">Forwards!</button> <button id="button5" type="button">Normal!</button> <div class="svg-container"> <svg viewBox="0 0 210 210"> <filter id="dropshadow" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur --> <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset --> <feMerge> <feMergeNode/> <!-- this contains the offset blurred image --> <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to --> </feMerge>
</filter> <rect id="rectangle" x="5" y="5" width="200" height="200" style="filter:url(#dropshadow)"> </svg> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Animated Stroke Dash - Script Codes CSS Codes

#rectangle { fill: transparent; stroke: orange; stroke-width: 5px; stroke-dasharray: 10;
}
.svg-container { max-width: 300px; margin: 1em auto;
}
button { border: 2px solid orange; background: transparent; color: orange; border-radius: 0.25em; -webkit-transition: all 250ms; transition: all 250ms; outline: none;
}
button:hover { background: orange; color: white;
}
/* Make things perty */
html { height: 100%;
}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;
}
h1,
h2 { margin: 0; text-transform: uppercase; text-shadow: 0 0 0.5em black;
}
h2 { font-weight: 300;
}
input { border: 1px solid #666; background: #333; color: #fff; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em auto; text-align: center;
}
a { color: orange; text-decoration: none; -webkit-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;
}
a:hover { color: yellow;
}
.container { display: block; margin: 2em 0;
}
p { max-width: 40em; margin: 1em auto;
}

SVG Animated Stroke Dash - Script Codes JS Codes

jQuery(document).ready(function(){ var tween = TweenMax.to($('#rectangle'), 5,
{ strokeDashoffset: 100, ease: 'linear', onComplete: function(){ tween.restart(); }, onReverseComplete: function(){ tween.reverse(0); }}	); $('#button1').on('click', function(){ tween.timeScale( 5 ); }); $('#button2').on('click', function(){ tween.timeScale( 0.5 ); }); $('#button3').on('click', function(){ tween.reverse(); }); $('#button4').on('click', function(){ tween.play(); }); $('#button5').on('click', function(){ tween.play(); tween.timeScale(1); });
});
SVG Animated Stroke Dash - Script Codes
SVG Animated Stroke Dash - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 4
Size 3,623 Kb
Views 74,888
Do you need developer help for SVG Animated Stroke Dash?

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!

Jon Christensen (JMChristensen) Script Codes
Name
Animated gradient text
SVG Circle Progress
Velocity Example
Table Cell Slideshow
Section Diagonal Areas
SVG Button Animation
Google Button Ripple
Simple CSS Loaders
Graphs and Snap.svg
SVG Image Blur
Create amazing art & images 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!