Platonic Shapes

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-18
Updated:
2016-11-18
Tags:
animation DOM 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100">
 <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"/>
 <circle fill="white" stroke="black" cx="170" cy="50" r="45"/>
 <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94 
279,79 248,94 254,62 230,39 263,35 "/>
 <line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/>
 <line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/>
</svg>>
in ​html5​ you're not required to add the ​xmlns="http://www.w3.org/2000/svg"​ attribute.

​width​ and ​height​ is not that important either. 

for colors we're using ​fill​ and ​stroke​. And in drawing in a x/y coordinate system. 

the star is ​polygon​, an array of points.
Note: you can pull out the ​width​ and ​height​ and then control the dimensions through CSS. She suggests to always do it with css. 
The coordinates map stays the same. 

​ViewBox​

you can use it to crop your canvas. and also to do animation