Draw svg animation

Developer
John Riordan
Size
3,837 Kb
Views
26,312
  1. Draw svg animation Previews
  2. Draw svg animation HTML Codes
  3. Draw svg animation CSS Codes
  4. Draw svg animation JS Codes

How do I make an draw svg animation?

What is a draw svg animation? How do you make a draw svg animation? This script and codes were developed by John Riordan on 22 August 2022, Monday.

Draw svg animation Previews
IQ Test

Draw svg animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draw svg animation</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> <h1>Click anywhere to draw up the play!</h1>
<div class="svg-parent-container">
<div class="svg-container">
<svg id="objective-svg" class="svg-content" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="xMinYMin meet" viewBox="0 0 516 500" enable-background="new 0 0 516 500" xml:space="preserve">
<g id="o3">	<g>	<path class="circle" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M413.508,301.861c-22.055,7.205-37.989,27.946-37.989,52.407c0,30.443,24.679,55.122,55.122,55.122s55.122-24.679,55.122-55.122	s-17.405-48.794-47.848-48.794c-2.819,0-5.588,0.212-8.293,0.62"/>	<path class="line" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M485.763,70.854C339.5,134,415,271,415,271"/>	<path class="arrow" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M393.309,73.78c0,0,54.74-4.39,95.228-2.927c0,0-31.22,56.098-39.512,82.927"/>	</g>
</g>
<g id="o2">	<g>	<path class="circle" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M290.155,389.235c42.161-2.296,48.867,23.783,48.867,40.872c0,31.926-25.29,57.807-56.486,57.807s-56.486-25.881-56.486-57.807	s25.29-57.807,56.486-57.807"/>	<path class="line" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M110,88c265.519-5.635,181.5,251.5,181.5,251.5"/>	<path class="arrow" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M184.468,139.5c0,0-51.5-42.491-80-51.745c0,0,43-23.89,82.5-46.572"/>	</g>
</g>
<g id="o1">	<g>	<path class="circle" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M97.833,339.5c-7.715-4.174-12.86-5.667-22.34-5.667c-29.459,0-53.34,22.983-53.34,51.333S46.034,436.5,75.493,436.5	s47.831-16.667,51.831-39c2.928-16.346,3.176-41.875-27.824-41"/>	<path class="line" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M123.5,315.5c0,0,33-34.667,58.5-75.333"/>	<path class="arrow" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M135.72,199.77c0,0,70.934,51.333,88.967,92.667"/>	</g>
</g>
<g id="x1">	<g>	<path class="line1" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M20.75,135.25c0,0,11.75,39.25,61.5,56"/>	<path class="line2" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M71.5,139.5c0,0-32.75,43.5-55,56.75"/>	</g>
</g>
<g id="x2">	<g>	<path class="line1" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M289,11.75c0,0,49,34.5,45.5,62.5"/>	<path class="line2" fill="none" stroke="#2D2D2D" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M350,19c0,0-40,13-61,39.5"/>	</g>
</g>
</svg>
</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>

Draw svg animation - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.svg-content { display: inline-block; position: absolute; top: 0; left: 0;
}
.svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; -webkit-mask-image: url(http://pcdn.paravel.netdna-cdn.com/wp-content/uploads/2012/03/mask.png);
}
.svg-parent-container { max-width: 400px; margin: 0 auto; padding: 30px;
}

Draw svg animation - Script Codes JS Codes

var circle1 = document.querySelector('#objective-svg #o1 .circle');
var line1 = document.querySelector('#objective-svg #o1 .line');
var arrow1 = document.querySelector('#objective-svg #o1 .arrow');
var clength1 = circle1.getTotalLength();
var alength1 = arrow1.getTotalLength();
var llength1 = line1.getTotalLength();
circle1.style.transition = circle1.style.WebkitTransition = 'none';
$(circle1).attr('stroke-dasharray',clength1 + ' ' + clength1).attr('stroke-dashoffset',clength1);
$(arrow1).attr('stroke-dasharray',alength1 + ' ' + alength1).attr('stroke-dashoffset',alength1);
$(line1).attr('stroke-dasharray',llength1 + ' ' + llength1).attr('stroke-dashoffset',llength1);
circle1.getBoundingClientRect();
line1.getBoundingClientRect();
arrow1.getBoundingClientRect();
//
var circle2 = document.querySelector('#objective-svg #o2 .circle');
var line2 = document.querySelector('#objective-svg #o2 .line');
var arrow2 = document.querySelector('#objective-svg #o2 .arrow');
var clength2 = circle2.getTotalLength();
var alength2 = arrow2.getTotalLength();
var llength2 = line2.getTotalLength();
$(circle2).attr('stroke-dasharray',clength2 + ' ' + clength2).attr('stroke-dashoffset',clength2);
$(arrow2).attr('stroke-dasharray',alength2 + ' ' + alength2).attr('stroke-dashoffset',alength2);
$(line2).attr('stroke-dasharray',llength2 + ' ' + llength2).attr('stroke-dashoffset','-'+llength2);
circle2.getBoundingClientRect();
line2.getBoundingClientRect();
arrow2.getBoundingClientRect();
//
var circle3 = document.querySelector('#objective-svg #o3 .circle');
var line3 = document.querySelector('#objective-svg #o3 .line');
var arrow3 = document.querySelector('#objective-svg #o3 .arrow');
var clength3 = circle3.getTotalLength();
var alength3 = arrow3.getTotalLength();
var llength3 = line3.getTotalLength();
$(circle3).attr('stroke-dasharray',clength3 + ' ' + clength3).attr('stroke-dashoffset',clength3);
$(arrow3).attr('stroke-dasharray',alength3 + ' ' + alength3).attr('stroke-dashoffset',alength3);
$(line3).attr('stroke-dasharray',llength3 + ' ' + llength3).attr('stroke-dashoffset','-'+llength3);
circle3.getBoundingClientRect();
line3.getBoundingClientRect();
arrow3.getBoundingClientRect();
//
var x1line1 = document.querySelector('#objective-svg #x1 .line1');
var x1line2 = document.querySelector('#objective-svg #x1 .line2');
var x1line1length = x1line1.getTotalLength();
var x1line2length = x1line2.getTotalLength();
$(x1line1).attr('stroke-dasharray',x1line1length + ' ' + x1line1length).attr('stroke-dashoffset',x1line1length);
$(x1line2).attr('stroke-dasharray',x1line2length + ' ' + x1line2length).attr('stroke-dashoffset',x1line2length);
x1line1.getBoundingClientRect();
x1line2.getBoundingClientRect();
//
var x2line1 = document.querySelector('#objective-svg #x2 .line1');
var x2line2 = document.querySelector('#objective-svg #x2 .line2');
var x2line1length = x2line1.getTotalLength();
var x2line2length = x2line2.getTotalLength();
$(x2line1).attr('stroke-dasharray',x2line1length + ' ' + x2line1length).attr('stroke-dashoffset',x2line1length);
$(x2line2).attr('stroke-dasharray',x2line2length + ' ' + x2line2length).attr('stroke-dashoffset',x2line2length);
x2line1.getBoundingClientRect();
x2line2.getBoundingClientRect();
$('#objective-svg path').css('-webkit-transition','stroke-dashoffset 0.2s ease-in-out');
$('body').click(function(){ circle1.style.strokeDashoffset = '0'; setTimeout(function(){ line1.style.strokeDashoffset = '0'; },600); setTimeout(function(){ arrow1.style.strokeDashoffset = '0'; },1200); setTimeout(function(){ circle2.style.strokeDashoffset = '0'; },1800); setTimeout(function(){ line2.style.strokeDashoffset = '0'; },2400); setTimeout(function(){ arrow2.style.strokeDashoffset = '0'; },3000); setTimeout(function(){ circle3.style.strokeDashoffset = '0'; },3600); setTimeout(function(){ line3.style.strokeDashoffset = '0'; },4200); setTimeout(function(){ arrow3.style.strokeDashoffset = '0'; },4800); setTimeout(function(){ x1line1.style.strokeDashoffset = '0'; },5800); setTimeout(function(){ x1line2.style.strokeDashoffset = '0'; },6200); setTimeout(function(){ x2line1.style.strokeDashoffset = '0'; },6400); setTimeout(function(){ x2line2.style.strokeDashoffset = '0'; },6800);
});
Draw svg animation - Script Codes
Draw svg animation - Script Codes
Home Page Home
Developer John Riordan
Username JohnRiordan
Uploaded August 22, 2022
Rating 3.5
Size 3,837 Kb
Views 26,312
Do you need developer help for Draw svg animation?

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!

John Riordan (JohnRiordan) Script Codes
Name
Feature article layout
Location marker - Pulse
Montoro branding
Border image
A Pen by John Riordan
Kick content off page
Little Calendar listing
Progressive form
Thermostat Thinger
Square Wallet UI - WIP
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!