animated-svg-graphics

Demonstrates how to animate SVG Graphics in HTML using JavaScript.

The HTML

Well, not much to this; just an empty div to hold the SVG image.

The CSS

Also, not much to understand here; just some dimensions to keep everything in check.

The JavaScript

This is the essence of this exercise. We are using the excellent d3.js library for the data visualizations.

You can find it on: https://d3js.org/ And of course on GitHib: https://github.com/d3/d3

SVG Graphics are essentially XML files with data. Vector or mathematical elements which we can access and which properties we can adjust and manipulate.

The circuit graphics have been build carefully in Adobe Illustrator, making sure to use only the necessary paths. And so we can animate the length property of the path to make it look like the graphic is "running".

Take a look at the live working version of this demo

(Refresh the page to see a different circuit being drawn)