two

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.0-alpha.1/two.js"></script>
<div id="two-container"></div>

<!--below is a relatively complex inline svg graphic-->
<h3>
 canvas rendering by two.js above. inline svg below
</h3>
<svg version="1.1" id="svggg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="413.928px" height="413.928px" viewBox="0 0 413.928 413.928" style="enable-background:new 0 0 413.928 413.928;" xml:space="preserve">
<g>
	<g>
		<path d="M244.873,161.937c6.655,0,12.045,5.392,12.045,12.044c0,6.65-5.39,12.04-12.045,12.04c-6.649,0-12.044-5.389-12.044-12.04    C232.829,167.328,238.223,161.937,244.873,161.937z"/>
		<path d="M371.029,339.641c-8.379-15.763-17.871-33.634-17.871-61.678c0-46.918,26.024-63.424,27.084-64.072    c3.85-2.278,5.115-7.246,2.837-11.096c-2.283-3.857-7.256-5.121-11.101-2.843c-1.429,0.85-35.021,21.39-35.021,78.011    c0,32.083,10.958,52.708,19.76,69.282c6.312,11.865,11.29,21.246,11.29,31.968c0,7.683-1.672,13.23-4.83,16.062    c-3.217,2.879-7.42,2.452-7.499,2.452c-0.385-0.058-0.78-0.084-1.171-0.084h-29.815c3.47-5.432,5.516-11.855,5.516-18.769V13.703    c0-3.636-2.426-6.827-5.933-7.805c-3.496-0.986-7.225,0.503-9.107,3.615l-39.562,65.485c-12.139-0.231-47.809-0.509-154.588-0.509    c-22.673,0-33.895,0.016-39.564,0.056L45.009,4.371c-1.724-3.317-5.508-5.028-9.109-4.137c-3.631,0.886-6.184,4.137-6.184,7.868    v370.762c0,19.28,15.681,34.969,34.966,34.969H188.46h106.784h58.82c0.532,0.047,1.286,0.095,2.225,0.095    c3.961,0,11.085-0.881,17.36-6.297c7.003-6.054,10.558-15.614,10.558-28.429C384.208,364.452,377.811,352.397,371.029,339.641z     M115.041,202.22c-15.572,0-28.242-12.667-28.242-28.239c0-15.575,12.675-28.244,28.242-28.244    c15.57,0,28.242,12.669,28.242,28.244C143.283,189.553,130.616,202.22,115.041,202.22z M194.134,234.763h-5.982l-0.654,11.253    c-0.248,4.304-3.818,7.631-8.079,7.631c-0.156,0-0.316-0.005-0.475-0.011c-4.464-0.264-7.878-4.097-7.612-8.554l0.599-10.314   ...

CSS

div {
  width: 100%;
  height: 100%;
}

svg,
canvas {
  border: 1px #000 solid;
}

JavaScript

// get a container element to put your instance of two in it
var container = document.getElementById('two-container');
var two = new Two({
  width: 300,
  height: 300,
  type: Two.Types.canvas // render in canvas
}).appendTo(container);
var svg = document.getElementById('svggg');

// interpret svg node
// it returns a Two.Group, a group of Two.Paths
// that make up the shape we see
var graphic = two.interpret(svg);

// anchors all vertices to the center position of the group
graphic.center();
// set attributes
graphic.translation.set(two.width/2,two.height/2);
graphic.scale = 0;

// bind a function to 'update'
two.bind('update',function(){
	// this function is called every time two.update() executes
  if (graphic.scale >= 0.5){
  	graphic.scale = 0;
  }
  graphic.scale += 0.001;
}).play(); // don't forget to play the animation