Path Animation
How do I make an path animation?
Quick and dirty attempt at replicating Polygon's SVG animation.. What is a path animation? How do you make a path animation? This script and codes were developed by Lloydwheeler on 26 January 2023, Thursday.
Path Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Path Animation</title>
</head>
<body> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<line class="touchline" fill="none" stroke="#000000" x1="200" y1="100" x2="600" y2="100" stroke-dasharray="1 400" stroke-dashoffset="0"/> <line class="touchline" fill="none" stroke="#000000" x1="200" y1="300" x2="600" y2="300" stroke-dasharray="1 400" stroke-dashoffset="0"/> <line class="touchline" fill="none" stroke="#000000" x1="200" y1="500" x2="600" y2="500" stroke-dasharray="1 400" stroke-dashoffset="0"/> <line class="touchline" fill="none" stroke="#000000" x1="200" y1="100" x2="200" y2="500" stroke-dasharray="1 400" stroke-dashoffset="0"/> <line class="touchline" fill="none" stroke="#000000" x1="600" y1="100" x2="600" y2="500" stroke-dasharray="1 400" stroke-dashoffset="0"/> <circle class="touchline" fill="none" stroke="#000000" cx="400" cy="300" r="74.161" stroke-dasharray="1 400" stroke-dashoffset="0"/>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Path Animation - Script Codes JS Codes
increment = 5;
var draw = function() { current = $('.touchline').attr('stroke-dasharray').split(" ")[0]; $('.touchline').attr('stroke-dasharray', (parseInt(current) + increment) + " 400"); if (current < 500) { setTimeout(draw, 10); }
}
draw()
Developer | Lloydwheeler |
Username | lloydwheeler |
Uploaded | January 26, 2023 |
Rating | 3 |
Size | 1,831 Kb |
Views | 4,048 |
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 |
3D Button | 2,896 Kb |
Spring Force | 5,229 Kb |
Triangle Generator | 3,947 Kb |
Breakpoints Example | 3,425 Kb |
Profile Flip | 2,373 Kb |
SVG Loading Animation | 2,786 Kb |
Particle Emitter | 2,320 Kb |
Page Editor Animation | 8,456 Kb |
Damping | 3,852 Kb |
A Pen by lloydwheeler | 2,180 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 |
Animating characters with jQuery | 042 | 2,776 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Starfield old school style | Bolloxim | 5,214 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!