Here is how I converted a VERY old bitmap image into a modern javascript animation...


I took my original 1996 MSPaint .BMP file and converted it to a .PNG file to bring it up to code with a modern file format. Here it is:

Converted .PNG to VERY rough .SVG image using Linux command-line utility 'autotrace' with default settings. (use apt or yum to install 'autotrace')

Manually grouped colored circles and black circle outlines together using Inkscape (select objects, group, right-click, group properties, enter ID, click set)

Corrected image dimensions.

Removed artifacts and unwanted blank white elements. Used Path->Exclusion to cut transparent holes as needed.

Saved image as "Optimized SVG" .svg file.

Edit .svg as text, remove undesired comment tags and metadata.... Viola!


 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="600" width="600" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g id="BlueCircle" transform="translate(0,-7)">
<path id="path6" fill="#000" d="m296,26.464c-44.7,8.06-32.73,78.136,12,70.071,44.7-8.06,32.72-78.135-12-70.071z"/>
<path id="path8" fill="#00F" d="m296,31.468c-38.249,7.2162-26.347,67.3,12,60.065,38.248-7.216,26.343-67.299-12-60.065z"/>
</g>
<g id="GreenCircle" transform="translate(0,-7)">
<path id="path10" fill="#000" d="m483,85.464c-44.704,8.0605-32.728,78.136,12,70.07,44.704-8.06,32.724-78.135-12-70.07z"/>
<path id="path12" fill="#0F0" d="m483,90.468c-38.249,7.2162-26.347,67.299,12,60.064,38.248-7.215,26.343-67.298-12-60.064z"/>
</g>
<g id="PurpleCircle" transform="translate(0,-7)">
<path id="path14" fill="#000" d="M113,93.464c-44.704,8.056-32.728,78.136,12,70.076,44.7-8.06,32.72-78.14-12-70.076z"/>
<path id="path16" fill="#800080" d="m113,98.468c-38.249,7.2154-26.347,67.299,12,60.064,38.248-7.215,26.343-67.298-12-60.064z"/>
</g>
<g id="WhiteCircle" transform="translate(0,-7)">
<path id="path3023" fill="#000" d="m546,275.46c-44.302,7.987-32.873,78.161,12,70.07,44.704-8.06,32.725-78.134-12-70.07"/>
<path id="path3024" fill="#FFF" d="m546,280.47c-38.249,7.215-26.347,67.299,12,60.064,38.179-7.202,26.364-67.302-12-60.064z"/>
</g>
<g id="RedCircle" transform="translate(0,-7)">
<path id="path22" fill="#000" d="m50,276.46c-44.704,8.06-32.728,78.135,12,70.07,44.704-8.06,32.725-78.134-12-70.07z"/>
<path id="path26" fill="#F00" d="m50,281.47c-38.249,7.215-26.347,67.299,12,60.064,38.248-7.215,26.343-67.298-12-60.064z"/>
</g>
<g id="OrangeCircle" transform="translate(0,-7)">
<path id="path3031" fill="#000" d="m119,459.46c-44.704,8.06-32.728,78.135,12,70.071,44.704-8.06,32.725-78.135-12-70.071"/>
<path id="path32" fill="#ff7a1b" d="m119,464.47c-38.249,7.216-26.347,67.299,12,60.064,38.248-7.215,26.342-67.298-12-60.064z"/>
</g>
<g id="YellowCircle" transform="translate(0,-7)">
<path id="path30" fill="#000" d="m477,459.46c-44.704,8.06-32.729,78.135,12,70.071,44.704-8.06,32.725-78.135-12-70.071z"/>
<path id="path34" fill="#FF0" d="m477,464.47c-38.249,7.216-26.347,67.299,12,60.064,38.179-7.202,26.364-67.302-12-60.064z"/>
</g>
<g id="BrownCircle" transform="translate(0,-7)">
<path id="path36" fill="#000" d="m297,525.46c-44.704,8.061-32.728,78.136,12,70.072,44.704-8.06,32.725-78.135-12-70.072z"/>
<path id="path38" fill="#800000" d="m297,530.47c-38.249,7.215-26.347,67.299,12,60.064,38.248-7.215,26.343-67.298-12-60.064z"/>
</g>
<g id="CenterThing" transform="translate(0,-1)">
<path id="path8008" d="m271,101v35h29v66c-22.53,0.06-55.18,8.8-69,28h-1c-8.86-12.57-22.13-23.13-33-34-3.6-3.6-11.45-8.93-12.78-14-1.99-7.59,14.36-11.29,12.44-19-1.67-6.68-18.92-22.95-25.66-22,2.91,6.24,20.53,17.34,18.78,24-1.25,4.76-7.94,8.96-10.78,13h-1c-4.24-6.02-14.03-19.13-22-18,3.48,7.47,14.75,12.27,16.78,20,1.21,4.6-9.3,14.61-13.78,12.38-7.9-3.95-13.18-18.77-23-17.38,3.47,7.45,11.22,13.26,17,19,2.02,2.01,4.83,5.78,8,5.78,5.68,0,14-11.52,17-15.78h1c11.56,16.42,31.58,36.44,48,48v1c-21.93,15.77-27.87,45.24-31,70h-60v-29h-35v5h30v24h-22l-6.09,2.84,7.09,2.16h21v24h-30v5h35v-29h60c3.13,24.76,9.07,54.23,31,70v1c-16.42,11.56-36.44,31.58-48,48h-1c-3-4.26-11.32-15.78-17-15.78-3.17,0-5.98,3.77-8,5.78-5.74,5.7-14.76,12.02-17,20,10.36-0.82,14.34-14.06,23-18.38,4.48-2.23,14.99,7.78,13.78,12.38-2.03,7.73-13.3,12.53-16.78,20,7.97,1.13,17.76-11.98,22-18h1c2.84,4.04,9.53,8.24,10.78,13,1.75,6.66-15.87,17.76-18.78,24,6.74,0.95,23.99-15.32,25.66-22,1.92-7.71-14.43-11.41-12.44-19,1.33-5.07,9.18-10.4,12.78-14,10.87-10.87,24.14-21.43,33-34h1c13.82,19.2,46.47,27.94,69,28v66h-29v35h5v-30h24v21l2.16,7.09,2.84-6.09v-22h24v30h5v-35h-29v-66c22.53-0.06,55.18-8.8,69-28h1c8.86,12.57,22.13,23.13,33,34,3.6,3.6,11.45,8.93,12.78,14,1.99,7.59-14.36,11.29-12.44,19,1.67,6.68,18.92,22.95,25.66,22-2.91-6.24-20.56-17.34-18.81-24,1.25-4.76,7.97-8.96,10.81-13h1c4.24,6.02,14.03,19.13,22,18-3.48-7.47-14.78-12.27-16.81-20-1.21-4.6,9.33-14.58,13.81-12.34,7.9,3.94,13.18,18.73,23,17.34-3.47-7.45-11.22-13.26-17-19-2.02-2.01-4.83-5.78-8-5.78-5.68,0-14,11.52-17,15.78h-1c-11.56-16.42-31.58-36.44-48-48v-1c21.93-15.77,27.87-45.24,31-70h60v29h35v-5h-30v-24h22l6.06-2.81-7.06-2.19h-21v-24h30v-5h-35v29h-60c-3.13-24.76-9.07-54.23-31-70v-1c16.42-11.56,36.44-31.58,48-48h1c3,4.26,11.32,15.78,17,15.78,3.17,0,5.98-3.77,8-5.78,5.78-5.74,13.53-11.55,17-19-9.82-1.39-15.1,13.43-23,17.38-4.48,2.23-14.99-7.78-13.78-12.38,2.03-7.73,13.3-12.53,16.78-20-7.97-1.13-17.76,11.98-22,18h-1c-2.84-4.04-9.53-8.24-10.78-13-1.75-6.66,15.87-17.76,18.78-24-6.74-0.95-23.99,15.32-25.66,22-1.92,7.71,14.47,11.41,12.47,19-1.33,5.07-9.21,10.4-12.81,14-10.87,10.87-24.14,21.43-33,34h-1c-14.1-19.15-46.29-27.94-69-28v-66h29v-35h-5v30h-24v-22l-2.81-6.09-2.19,7.09v21h-24v-30h-5zm28,106-18,44-45-19c12.94-16.88,42.6-24.83,63-25zm7,0c20.82,0.17,51.1,8.48,64,26l-46,18-18-44zm-7,12c4.41,10.51,1,28.57,1,40l-12.88-6.5,2.16-9.5,9.72-24zm6,0c6.32,8.35,12.45,24.65,14,35l-14,5v-40zm-76,18c8.2,12.21,15.61,31.69,19,46l-47,19c0.51-24.87,11.98-46.65,28-65zm146,0c18.37,14.05,28.54,42.47,29,65l-47-19c2.27-15.13,11.46-32.19,18-46zm-134,3,38,15-6,16c-11.24-5.24-24.88-20.89-32-31zm122,1c-7.69,10.92-20.08,23.31-31,31l-6-16,37-15zm-125,3c9.84,6.93,24.9,20.05,30,31l-15,6-15-37zm127,1c1.6,9.14-9.06,26.58-13,35l-15-6,28-29zm-82,12,13,6-17,7,4-13zm39,1,4,11-16-6,12-5zm-22,9v32l-23-23,23-9zm5,0,23,9-23,23v-32zm31,12,14,6-6,14-8-20zm-67,1-8,19-6-14,14-5zm5,0,23,23h-32l9-23zm56,0,10,23h-32l22-23zm24,7c11.74,3.21,28.29,8.65,38,16h-44l6-16zm-103,1,6,15h-43v-1l37-14zm125.62,18.47c6.14,0.03,11.9,0.65,16.38,2.53l-39,15-7-16c8.13,0,19.4-1.58,29.62-1.53zm-163.62,1.53h44l-6,16-38-15v-1zm51,0h33l-23,23-10-23zm44,0h32l-9,23-23-23zm-107,1,47,20-18,45c-18.37-14.05-28.54-42.47-29-65zm203,1c-0.97,22.65-11.16,51.14-30,65l-18-46c14.43-6.83,32.28-16.29,48-19zm-105,2,1,33-23-9,22-24zm6,0,23,23-23,9v-32zm-45,1,9,19-14-6,5-13zm83,1,6,13-12,4,6-17zm-90,17,15,6c-7.46,10.6-19.4,22.54-30,30l15-36zm98,0,14,34c-9.3-6.55-23.17-18.64-28-29l14-5zm-80,9,7,15-36,15,29-30zm61,0c11.83,5.52,26.5,22.36,34,33l-40-17,6-16zm-5,1-5,13-14-5v-1l19-7zm-48,1,16,7-12,4-4-11zm21,10v41h-1l-14-35,15-6zm5,1,14,5-13,35h-1v-40zm-24,7,17,44c-20.54-0.42-50.28-8.73-63-26l46-18zm43,1,45,18c-12.76,16.63-41.88,24.58-62,25l17-43z"/>
<rect id="rect3009" opacity="0.99" ry="0" height="600" width="600" y="1" x="0" fill="none"/>
</g>
</svg>

... now that I have an XML-compliant object, I can do fun things with the values...

with d3 and jQuery using the following code:

Note the "turnCenter" function required to animate 'transform' attribute. Rotation with a pivot point (centered at 300x300) requires a multi-parameter value like "rotate(124,300,300)", and this requires a 'tween' to perform the step-by-step transition. "attrTween" and "interpolateString" can also be used to impart complex logic or computations to the returned value.

And while similar in concept to Adobe Flash, this code is 100% HTML5 compliant without the need for plugins. I've not found any easy GUI editor like Flash, so for this thechnique the browser debugger console is used heavily.