Animated SVG stroke-dasharray

Developer
Sten Hougaard
Size
3,179 Kb
Views
50,600
  1. Animated SVG stroke-dasharray Previews
  2. Animated SVG stroke-dasharray HTML Codes
  3. Animated SVG stroke-dasharray CSS Codes
  4. Animated SVG stroke-dasharray JS Codes

How do I make an animated svg stroke-dasharray?

Using jQuery I set various attributes on circles to random values. I have asked CSS to animate any change using transition. So using SVG, CSS3 transitions and jQuery some rather stunning animation effects are achieved. The first SVG was created using the OSX app Sketch, and this pen is actually just a step (a detour) towards another goal :-). What is a animated svg stroke-dasharray? How do you make a animated svg stroke-dasharray? This script and codes were developed by Sten Hougaard on 07 July 2022, Thursday.

Animated SVG stroke-dasharray Previews
IQ Test

Animated SVG stroke-dasharray - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated SVG stroke-dasharray</title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ svg circle, h1 { transition: all .2s;
}
body { padding: 2em 0px; background-color: black; text-align: center;
}
svg circle { box-shadow: 0px 0px 10px white;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Animated SVG stroke-dasharray</h1>
<svg class="col-md-12" viewBox="0 0 220 213" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <title>labyrint 1</title> <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description> <defs></defs> <g transform="translate(100, 100)" id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <line x1="-100" y1="0" x2="100" y2="0" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="32s" repeatCount="indefinite" /></line> <line x1="0" y1="-100" x2="0" y2="100" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="32s" repeatCount="indefinite" /></line> <circle id="mur-1" stroke="#8B572A" stroke-dasharray="10,10,1000" sketch:type="MSShapeGroup" cx="0" cy="0" r="100"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /</circle> <circle id="mur-2" stroke="#8B572A" stroke-dasharray="40,10,2000" sketch:type="MSShapeGroup" cx="0" cy="0" r="90"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /></circle> <line x1="-100" y1="0" x2="100" y2="0" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="64s" repeatCount="indefinite" /></line> <line x1="0" y1="-100" x2="0" y2="100" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="64s" repeatCount="indefinite" /></line> </g>
</svg> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated SVG stroke-dasharray - Script Codes CSS Codes

svg circle, h1 { transition: all .2s;
}
body { padding: 2em 0px; background-color: black; text-align: center;
}
svg circle { box-shadow: 0px 0px 10px white;
}

Animated SVG stroke-dasharray - Script Codes JS Codes

var s = "";
var ii = 1;
for(var i=95; i>10; i-=10) { var d = Math.PI*2*i; var f = parseInt(d*.1); var r1 = parseInt(Math.random()*200); s+='<circle id="væg-'+(ii++)+'" stroke="#8B572A" stroke-width="11" stroke-dasharray="1,'+f+','+r1+'" sketch:type="MSShapeGroup" cx="0" cy="0" r="'+i+'"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /></circle>\n';
}
$('#Page-1').html($('#Page-1').html()+s);
setInterval(function() { var w = 90; var cr = parseInt(Math.random()*255); var cg = parseInt(Math.random()*255); var cb = parseInt(Math.random()*255); var stroke = 'rgba('+cr+','+cg+','+cb+','+(Math.random()*.3+.7)+')'; var fill = 'rgba('+(255-cr)+','+(255-cr)+','+(255-cr)+',.08)'; $('h1').css({'color':stroke,'background-color':fill}); $('circle').each(function() { var dp = ""; for(var i=0; i<Math.random()*4; i++) { dp+=(i===0 ? "" : ",")+parseInt(Math.random()*100) } var sw = Math.random()*(w/2); w-=sw; $(this).attr({'stroke-width':sw+'px','stroke-dasharray': dp,'stroke':stroke,'r':90-w+'px','fill':fill}); })
},3000)
Animated SVG stroke-dasharray - Script Codes
Animated SVG stroke-dasharray - Script Codes
Home Page Home
Developer Sten Hougaard
Username netsi1964
Uploaded July 07, 2022
Rating 4.5
Size 3,179 Kb
Views 50,600
Do you need developer help for Animated SVG stroke-dasharray?

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!

Sten Hougaard (netsi1964) Script Codes
Name
Rendering NASDAQ data using AngularJS
Draw on SVG using AngularJS
AngularJS playground
Instagram images using AngularJS
Custom cursors using data-uri
Apply filter effects in SVG
Use browse happy
Simulate SVG paths are drawn using CSS animation
Get info about visitor
Test CSS variables and inheritance
Create amazing blog posts 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!