What is the best way to create an animated, step-by-step drawing of an SVG path

Question

What is the best way to create an animated, step-by-step drawing of an SVG path

I am interested in creating an animated progressive drawing of a line using CSS with SVG/Canvas and JS. You can view the specific line I want to draw here

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with custom SVG code -->
 <g>
  <title>Layer 1</title>
  <path d="m33,104c1,0 2.1306,-0.8037 23,3c9.07012,1.65314 10,2 24,2c7,0 29,0 33,0c8,0 9,0 11,0c2,0 8,0 11,0c9,0 17,0 18,0c10,0 12,0 20,0c1,0 6,0 7,0c2,0 3.07613,0.38268 4,0c2.61313,-1.08239 2,-3 2,-6c0,-1 0,-2 0,-3c0,-1 0,-2 0,-3c0,-1 0,-2 0,-3c0,-1 0,-2 0,-3c0,-1 0.30745,-3.186 -1,-5c-...
 </g>
</svg>

javascript css canvas svg

Answer 1

Answer №1

There are three methods outlined in this solution:

An innovative approach using SVG involves adjusting the stroke-dasharray to progressively increase the length of the 'dash' followed by a large gap.

Live Demo:

Key code snippet:

var distancePerPoint = 1;
var drawFPS          = 60;

var orig = document.querySelector('path'), length, timer;
orig.addEventListener('mouseover',startDrawingPath,false);
orig.addEventListener('mouseout', stopDrawingPath, false);

function startDrawingPath(){
  length = 0;
  orig.style.stroke = '#f60';
  timer = setInterval(increaseLength,1000/drawFPS);
}

function increaseLength(){
  var pathLength = orig.getTotalLength();
  length += distancePerPoint;
  orig.style.strokeDasharray = [length,pathLength].join(' ');
  if (length >= pathLength) clearInterval(timer);
}

function stopDrawingPath(){
  clearInterval(timer);
  orig.style.stroke = '';
  orig.style.strokeDasharray = '';
}

Alternatively, an all-SVG method allows you to construct the SVG path element step by step:

Live Demo:

Relevant code excerpt:

// Assumes 'orig' and dup' are SVG paths
function addNextPathSegment(){
  var nextIndex   = dup.pathSegList.numberOfItems;
  if (nextIndex<orig.pathSegList.numberOfItems){
    var nextSegment = orig.pathSegList.getItem(nextIndex);
    var segmentDup  = cloneSVGPathSeg( dup, nextSegment );
    dup.pathSegList.appendItem( segmentDup );
  }
}

function cloneSVGPathSeg( path, seg ){
  switch(seg.pathSegTypeAsLetter){
    // Cases for various path commands
  }
}

For a different approach, consider drawing the path onto an HTML5 canvas by sampling points along the SVG path and rendering them on the canvas:

Live Demo:

Relevant code snippet:

function startDrawingPath(){
  points = [];
  timer = setInterval(buildPath,1000/drawFPS);
}

// Assumes that 'orig' is an SVG path
function buildPath(){
  var nextPoint = points.length * distancePerPoint;
  var pathLength = orig.getTotalLength();
  if (nextPoint <= pathLength){
    points.push(orig.getPointAtLength(nextPoint));
    redrawCanvas();
  } else stopDrawingPath();
}

function redrawCanvas(){
  clearCanvas();
  ctx.beginPath();
  ctx.moveTo(points[0].x,points[0].y);
  // Draw the path on the canvas
  ctx.stroke();
}

Answer 2

There are three methods outlined in this solution:

An innovative approach using SVG involves adjusting the stroke-dasharray to progressively increase the length of the 'dash' followed by a large gap.

Live Demo:

Key code snippet:

var distancePerPoint = 1;
var drawFPS          = 60;

var orig = document.querySelector('path'), length, timer;
orig.addEventListener('mouseover',startDrawingPath,false);
orig.addEventListener('mouseout', stopDrawingPath, false);

function startDrawingPath(){
  length = 0;
  orig.style.stroke = '#f60';
  timer = setInterval(increaseLength,1000/drawFPS);
}

function increaseLength(){
  var pathLength = orig.getTotalLength();
  length += distancePerPoint;
  orig.style.strokeDasharray = [length,pathLength].join(' ');
  if (length >= pathLength) clearInterval(timer);
}

function stopDrawingPath(){
  clearInterval(timer);
  orig.style.stroke = '';
  orig.style.strokeDasharray = '';
}

Alternatively, an all-SVG method allows you to construct the SVG path element step by step:

Live Demo:

Relevant code excerpt:

// Assumes 'orig' and dup' are SVG paths
function addNextPathSegment(){
  var nextIndex   = dup.pathSegList.numberOfItems;
  if (nextIndex<orig.pathSegList.numberOfItems){
    var nextSegment = orig.pathSegList.getItem(nextIndex);
    var segmentDup  = cloneSVGPathSeg( dup, nextSegment );
    dup.pathSegList.appendItem( segmentDup );
  }
}

function cloneSVGPathSeg( path, seg ){
  switch(seg.pathSegTypeAsLetter){
    // Cases for various path commands
  }
}

For a different approach, consider drawing the path onto an HTML5 canvas by sampling points along the SVG path and rendering them on the canvas:

Live Demo:

Relevant code snippet:

function startDrawingPath(){
  points = [];
  timer = setInterval(buildPath,1000/drawFPS);
}

// Assumes that 'orig' is an SVG path
function buildPath(){
  var nextPoint = points.length * distancePerPoint;
  var pathLength = orig.getTotalLength();
  if (nextPoint <= pathLength){
    points.push(orig.getPointAtLength(nextPoint));
    redrawCanvas();
  } else stopDrawingPath();
}

function redrawCanvas(){
  clearCanvas();
  ctx.beginPath();
  ctx.moveTo(points[0].x,points[0].y);
  // Draw the path on the canvas
  ctx.stroke();
}

Answer 3

Answer №2

There is a similar question that has been answered here.

I utilized your path and incorporated it into the code provided in the mentioned answer.

Check out the jsfiddle demo here

Here's the HTML code snippet:

<html>
<style>
    #canvas
    {
    border-style:solid;
    border-width:1px;
    }
</style>
<div id="canvas"> 
    <p>Hover over me</p>        
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

And below is the JavaScript code snippet:

$(function() {
// Code for animating line will go here...
});

The path from the [d] attribute was extracted and assigned to the pathString variable.
A line defining the [stroke-width] was also added.

Although I have only dabbled with Raphael briefly, exploring examples and dissecting code structure (especially from page source) can provide valuable insights (I referenced the stroke-width placement from the page source of this example).

For more information on Raphael, you can visit their site here.

Just for fun, I created my own path as well. You can check it out here.

Answer 4

There is a similar question that has been answered here.

I utilized your path and incorporated it into the code provided in the mentioned answer.

Check out the jsfiddle demo here

Here's the HTML code snippet:

<html>
<style>
    #canvas
    {
    border-style:solid;
    border-width:1px;
    }
</style>
<div id="canvas"> 
    <p>Hover over me</p>        
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

And below is the JavaScript code snippet:

$(function() {
// Code for animating line will go here...
});

The path from the [d] attribute was extracted and assigned to the pathString variable.
A line defining the [stroke-width] was also added.

Although I have only dabbled with Raphael briefly, exploring examples and dissecting code structure (especially from page source) can provide valuable insights (I referenced the stroke-width placement from the page source of this example).

For more information on Raphael, you can visit their site here.

Just for fun, I created my own path as well. You can check it out here.

Answer 5

Answer №3

After discovering Phrogz's fantastic technique, I successfully crafted a simple yet effective GreenSock animation using TweenLite to smoothly transition from one length value to the getTotalLength() value.

As showcased in the demo, integrating this with a tween engine grants you extensive control while requiring minimal code.

const originalPath = document.querySelector('path');
let currentLength;
let timer;

const obj = {
  length: 0,
  pathLength: originalPath.getTotalLength()
};

originalPath.style.stroke = '#f60';

const tween = TweenMax.to(obj, 10, {
  length: obj.pathLength,
  onUpdate: drawLine,
  ease: Linear.easeNone
});

function drawLine() {
  originalPath.style.strokeDasharray = [obj.length, obj.pathLength].join(' ');
  updateSlider();
}

Kudos to Phrogz for the incredible concept and code contributions.

Access the CodePen demo here!

Answer 6

After discovering Phrogz's fantastic technique, I successfully crafted a simple yet effective GreenSock animation using TweenLite to smoothly transition from one length value to the getTotalLength() value.

As showcased in the demo, integrating this with a tween engine grants you extensive control while requiring minimal code.

const originalPath = document.querySelector('path');
let currentLength;
let timer;

const obj = {
  length: 0,
  pathLength: originalPath.getTotalLength()
};

originalPath.style.stroke = '#f60';

const tween = TweenMax.to(obj, 10, {
  length: obj.pathLength,
  onUpdate: drawLine,
  ease: Linear.easeNone
});

function drawLine() {
  originalPath.style.strokeDasharray = [obj.length, obj.pathLength].join(' ');
  updateSlider();
}

Kudos to Phrogz for the incredible concept and code contributions.

Access the CodePen demo here!

Answer 7

Answer №4

Last year, I embarked on a project involving animating a drawing using canvas. The paths consisted of SVG-type paths containing curves and lines, allowing me to easily extract them from the SVG file and insert them into a JavaScript array.

Check out this link for more details:

Answer 8

Last year, I embarked on a project involving animating a drawing using canvas. The paths consisted of SVG-type paths containing curves and lines, allowing me to easily extract them from the SVG file and insert them into a JavaScript array.

Check out this link for more details:

What is the best way to create an animated, step-by-step drawing of an SVG path

Answer №1

Live Demo:

Live Demo:

Live Demo:

Answer №2

Answer №3

Answer №4

Similar questions

Next.js - utilizing dynamic API routes within nested folders

Adjust the height of a DIV element using Jquery Resizable to a minimum height of 1px, smaller than its default value

Creating unsightly class names using Node.js

Steps for Integrating a Web Service Reference in NodeJS

Tips for implementing a default font on a website

What's the best way to add vertical space to my DIV containing buttons?

Exploring the Ways to Share sessionStorage Across Multiple Browser Tabs Using JavaScript

Customizing WordPress using CSS overrides in the Pinboard theme

What is the best way to deactivate a hyperlink of an <a> tag specifically for a particular child within an element?

Continuously encountering the "Uncaught Error: Bootstrap dropdown requires Popper.js" message despite having already added popper.js to the code

Tips on avoiding the accumulation of event handlers when dealing with click events triggered by the document selector in jQuery

When you hit a certain point on the website, the scrolling momentarily pauses

Close button in Popover not functioning properly for SVG element

What is the best way to use CSS in conjunction with a Master Page and a new content page, ensuring that the new CSS does not interfere with

Converting Cookies to Numeric Values in JavaScript: A Step-by-Step Guide

How can data be displayed in AngularJS/Json without using ng-repeat?

Struggling with UI-Grid's single filter feature when dealing with intricate data structures?

Utilizing Node.js to Retrieve Data from MySQL

What is the method for retrieving the locale value from the configuration in Next.js?

Verify that each interface in an array includes all of its respective fields - Angular 8