Skip to content

Demonstrates how to animated SVG Graphics in HTML using JavaScript

License

Notifications You must be signed in to change notification settings

VincentKlijn/animated-svg-graphics

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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".

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

About

Demonstrates how to animated SVG Graphics in HTML using JavaScript

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published