Basic Example of SVG Line Drawing, Backward and Forward

Developer
Chris Coyier
Size
2,051 Kb
Views
64,768
  1. Basic Example of SVG Line Drawing, Backward and Forward Previews
  2. Basic Example of SVG Line Drawing, Backward and Forward HTML Codes
  3. Basic Example of SVG Line Drawing, Backward and Forward CSS Codes

How do I make an basic example of svg line drawing, backward and forward?

What is a basic example of svg line drawing, backward and forward? How do you make a basic example of svg line drawing, backward and forward? This script and codes were developed by Chris Coyier on 04 July 2022, Monday.

Basic Example of SVG Line Drawing, Backward and Forward Previews
IQ Test

Basic Example of SVG Line Drawing, Backward and Forward - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Example of SVG Line Drawing, Backward and Forward</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.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! */ .path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear alternate infinite;
}
@keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</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="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve"> <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8	s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41	C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Basic Example of SVG Line Drawing, Backward and Forward - Script Codes CSS Codes

.path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear alternate infinite;
}
@keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; }
}
Basic Example of SVG Line Drawing, Backward and Forward - Script Codes
Basic Example of SVG Line Drawing, Backward and Forward - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded July 04, 2022
Rating 4.5
Size 2,051 Kb
Views 64,768
Do you need developer help for Basic Example of SVG Line Drawing, Backward and Forward?

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!

Chris Coyier (chriscoyier) Script Codes
Name
Bar Navigation with Flexbox and SVG icons
Slide in from bottom boxes
Airtable Emoji Poll
Animation to Explain CSS Triangles
Merging Flexbox Syntaxes
Vertical-align examples
Pull Quote from NY Post
A Pen by Chris Coyier
Load External Data in React
Search Box in Content Moves to Fixed Header
Create amazing SEO content 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!