SVG Animation Follow Path - d3js

Size
3,068 Kb
Views
56,672

How do I make an svg animation follow path - d3js?

What is a svg animation follow path - d3js? How do you make a svg animation follow path - d3js? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.

SVG Animation Follow Path - d3js Previews

SVG Animation Follow Path - d3js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animation Follow Path - d3js</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Pure SVG Animation Follow Path - d3js</h1> <hr/> <ul> <li>Follow this <a href="http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_animation">tutorial</a>, but generate the data based on json.</li> <li>Render the svg using d3js function.</li> <li>Zoom in and zoom out by mouse scrolling.</li> <li>Move view by mouse dragging.</li> </ul> <h3></h3> <svg></svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Animation Follow Path - d3js - Script Codes CSS Codes

body { background: #232438; color: #fff;
}
a { color: yellow;
}
svg { background: #32344F; border: 1px solid #292A3F; border-radius: 25px;
}
g.container { stroke: #eaeaea; border: #eaeaea;
}
path { fill: none; stroke: #fff; stroke-width: 2;
}
#piece { fill: #000;
}

SVG Animation Follow Path - d3js - Script Codes JS Codes

data = { 1:{ ST:[ { caseId:[ {id:'1', case:'case1', speed:10, color:'#24A9A8'}, {id:'2', case:'case2', speed:5, color:'#24A9A8'}, {id:'3', case:'case3', speed:15, color:'#24A9A8'}, ] } ] }, 10:{ ST:[ { caseId:[ {id:'4', case:'case1', speed:8, color:'#116360'}, {id:'5', case:'case2', speed:9, color:'#116360'}, {id:'6', case:'case3', speed:13, color:'#116360'}, ] } ] },
};
var zoom = d3.behavior.zoom() .scaleExtent([0.2, 3]) .on("zoom", zoomed);
var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended);
var svg = d3.select('svg') .attr('width',800) .attr('height',800) .call(zoom);;
var container = svg.append('g').attr('class','container');
var defs = svg.append('defs');
var path = container.append('path') .attr('id','shape') .attr('d', 'M 115,169 S 149,424 460,555 S 608,367 568,157 S 438,108 174,57 S 97,90 115,169');
/* generate circle */
for(var time in data){ //console.log(data[time].ST); console.log('time:' + time) var ST = data[time].ST; for(var time2 in ST ){ //console.log(ST[time2]); caseId = ST[time2].caseId; for(var event in caseId){ console.log(caseId[event].id); container.append('circle') .attr('id', caseId[event].id) .attr('fill',caseId[event].color) .attr('cx',0) .attr('cy',0) .attr('r', 10); defs.append('animateMotion') .attr('xlink:href', '#'+caseId[event].id) .attr('start', time+'s') .attr('dur', caseId[event].speed+'s') .attr('rotate', 0) .attr('repeatCount','indefinite') .append('mpath') .attr('xlink:href', '#shape'); } }
}
function zoomed() { container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true);
}
function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) { d3.select(this).classed("dragging", false);
}
SVG Animation Follow Path - d3js - Script Codes
SVG Animation Follow Path - d3js - Script Codes
Home Page Home
Developer Dzulfikar Adi Putra
Username superpikar
Uploaded September 06, 2022
Rating 4
Size 3,068 Kb
Views 56,672
Do you need developer help for SVG Animation Follow Path - d3js?

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!

Dzulfikar Adi Putra (superpikar) Script Codes
Create amazing art & images 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!