Ampelmann - Ost vs West

HTML CSS JS Result EDIT ON Advanced SVG Shape Morphing MorphSVGPlugin morphs any SVG regardless of number of points. .st0{fill:#000;stroke:#000000;stroke-miterlimit:10;} .st1{fill:#CCCCCC;} svg { width:600px; } #hippo, #elephant, #star{ visibility:hidden; } #slider { width:560px; margin:20px 0; } h1 { font-size:30px; } h2 { font-size:16px; } //From 7 Hidden Gems of GSAP (Net Magazine) //Read full article: /* Try GreenSock's MorphSVGPlugin for free. - Press the Fork button - add your own SVG, JS and HTML - have fun. Learn more about MorphSVGPlugin here: MorphSVGPlugin is a bonus plugin for Shocking Green and Business Green members: */ // Demo for 7 Hidden Gems of GSAP article that was published in the June 2016 edition of Net Magazine. Learn more: var tl = new TimelineLite(), circle = document.getElementById("circle");, 1, {morphSVG:"#hippo"}, "+=1") .to(circle, 1, {morphSVG:"#star"}, "+=1") .to(circle, 1, {morphSVG:"#elephant"}, "+=1") .to(circle, 1, {morphSVG:circle}, "+=1");
fixed container in illustrator: make artboard at deserved size!