Skip to content

Instantly share code, notes, and snippets.

Last active March 8, 2018 07:54
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save KoGor/8162640 to your computer and use it in GitHub Desktop.
Save KoGor/8162640 to your computer and use it in GitHub Desktop.
Marker animation along SVG <path> element with D3.js
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>SVG path animation</title>
<link href="style.css" rel="stylesheet">
<script src=""></script>
<script src=""></script>
<!-- start -->
<div id="pathAnimation">
<script src="pathFollow.js"></script>
<!-- end -->
.defer(d3.xml, "wiggle.svg", "image/svg+xml")
function ready(error, xml) {
//Adding our svg file to HTML document
var importedNode = document.importNode(xml.documentElement, true);"#pathAnimation").node().appendChild(importedNode);
var svg ="svg");
var path ="path#wiggle"),
startPoint = pathStartPoint(path);
var marker = svg.append("circle");
marker.attr("r", 7)
.attr("transform", "translate(" + startPoint + ")");
//Get path start point for placing marker
function pathStartPoint(path) {
var d = path.attr("d"),
dsplitted = d.split(" ");
return dsplitted[1].split(",");
function transition() {
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);// infinite loop
function translateAlong(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";//Move marker
path {
fill: none;
stroke: #000;
stroke-width: 1px;
circle {
fill: red;
Display the source blob
Display the rendered blob
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment