WAPG 6 SVG Animation Programming SMIL JavaScript CSS

Published :
Author :
Adam Khoury

Learn SVG animation techniques using animation elements(SMIL), JavaScript and CSS.

Example 1 <svg width="400px" height="200px" style="border:1px solid black; overflow:hidden;"> <rect id="rect1" x="0" y="0" width="50" height="50" fill="red" transform="rotate(45)"></rect> </svg> <script> var rect1 = document.getElementById("rect1"); var reqID, x = 0; function animate(){ x++; rect1.setAttribute( 'x', x ); // rect1.x.baseVal.value += 1.0; // Alternative to the 2 lines above reqID = window.requestAnimationFrame(animate); } reqID = window.requestAnimationFrame(animate); </script> Example 2 <!doctype html> <html> <head> <meta charset="UTF-8"> <style> #circ1{ stroke:#999; stroke-width:.5; } text{ font-size:5px; font-family: Arial, Helvetica, sans-serif; } </style> </head> <body> <svg width="400" height="400" style="border:1px solid gray;" viewBox="-40 -40 80 80"> <rect id="rect1" x="-.2" y="-20" width=".3" height="20" fill="red"/> <rect id="rect2" x="-.2" y="-20" width=".6" height="20" fill="black"/> <rect id="rect3" x="-.7" y="-12" width="1.5" height="12" fill="black"/> <circle id="circ1" x="50%" y="50%" r="25" fill="none"/> <circle id="circ2" x="50%" y="50%" r="1.5" fill="#000"/> <text id="txt12" text-anchor="middle" x="0" y="-18">12</text> <text id="txt3" text-anchor="middle" x="20" y="2">3</text> <text id="txt6" text-anchor="middle" x="0" y="21">6</text> <text id="txt9" text-anchor="middle" x="-20" y="2">9</text> </svg> <h1 id="status" style="border:1px solid #000; padding:10px; display:inline;"></h1> <script> var date, secs, mins, hrs, reqID; var rect1 = document.getElementById("rect1"); var status = document.getElementById("status"); function runClock(evt) { date = new Date(); secs = date.getSeconds(); mins = date.getMinutes(); hrs = date.getHours(); if (hrs == 0) { hrs = 12; } else if (hrs > 12) { hrs = hrs - 12; } document.getElementById("status").innerHTML = hrs+" : "+mins+" : "+secs; rect1.setAttribute('transform', 'rotate(' + secs*6 + ')'); rect2.setAttribute('transform', 'rotate(' + mins*6 + ')'); rect3.setAttribute('transform', 'rotate(' + hrs*30 + ')'); } setInterval( runClock, 1000 ); </script> </body> </html> Example 3 <style> svg{ width: 500px; height: 300px; border:1px solid #000; } @keyframes flasher { 0%{ fill:#900; stroke:#F66; } 50%{ fill:#FF8080; stroke:#900; stroke-width:10px; } 100%{ fill:#900; stroke:#F66; } } .flashcircle { animation: flasher 1.5s linear infinite; } </style> <svg> <circle class="flashcircle" cx="50%" cy="50%" r="50" fill="#900" stroke="#F66"/> </svg> Example 4 <!doctype html> <html> <head> <meta charset="UTF-8"> <style> svg { height: 220px; width: 360px; background:#FFF; } ellipse { fill:#C6E7FF; stroke:#BFDFFF; transition: transform 0.3s ease, fill 0.2s linear; cursor:pointer; } ellipse:hover { fill: #E1F0FF; cursor: pointer; } g{ transition: transform 0.6s ease; } .svgtext{ font-size:17px; fill:#000; pointer-events:none; font-family:Arial, Helvetica, sans-serif; letter-spacing:1px; font-weight:100;} </style> <script> var btn1, btn2, btn3, togglebtn, isopen = false;; function toggleMenu(){ if(isopen){ btn1.style.transform = "translate(0px, 0px)"; btn2.style.transform = "translate(0px, 0px)"; btn3.style.transform = "translate(0px, 0px)"; togglebtn.style.transform = "translate(0px, 0px)"; togglebtntxt.innerHTML = "menu"; isopen = false; } else { btn1.style.transform = "translate(-120px, 120px)"; btn2.style.transform = "translate(0px, 120px)"; btn3.style.transform = "translate(120px, 120px)"; togglebtn.style.transform = "translate(90px, 10px) scale(.5)"; togglebtntxt.innerHTML = "X"; isopen = true; } } window.addEventListener("load", function(){ btn1 = document.getElementById("btn1"); btn2 = document.getElementById("btn2"); btn3 = document.getElementById("btn3"); togglebtn = document.getElementById("togglebtn"); togglebtntxt = document.getElementById("togglebtntxt"); togglebtn.addEventListener( "click", function(){ toggleMenu(); }); btn1.addEventListener( "click", function(){ alert("clicked button 1"); }); btn2.addEventListener( "click", function(){ alert("clicked button 2"); }); btn3.addEventListener( "click", function(){ alert("clicked button 3"); }); }); </script> </head> <body> <svg> <g id="btn1"> <ellipse id="b1" class="btns" cx="50%" cy="50" rx="50" ry="50"></ellipse> <text id="btn1txt" class="svgtext" x="50%" y="20" font-size="35" text-anchor="middle" dy="2em">Option 1</text> </g> <g id="btn2"> <ellipse id="b2" class="btns" cx="50%" cy="50" rx="50" ry="50"></ellipse> <text id="btn2txt" class="svgtext" x="50%" y="20" font-size="35" text-anchor="middle" dy="2em">Option 2</text> </g> <g id="btn3"> <ellipse id="b3" class="btns" cx="50%" cy="50" rx="50" ry="50"></ellipse> <text id="btn3txt" class="svgtext" x="50%" y="20" font-size="35" text-anchor="middle" dy="2em">Option 3</text> </g> <g id="togglebtn"> <ellipse cx="50%" cy="50" rx="50" ry="50"></ellipse> <text id="togglebtntxt" class="svgtext" x="50%" y="20" font-size="35" text-anchor="middle" dy="2em">menu</text> </g> </svg> </body> </html> Example 5 <svg width="300px" height="100px" style="border:1px solid gray;"> <ellipse cx="50" cy="50" rx="20" ry="20" fill="red"> <animate attributeName="cx" from="50" to="250" dur="3s" repeatCount="indefinite" begin="0s" /> </ellipse> </svg> <svg width="300px" height="300px" style="border:1px solid gray;"> <rect x="0" y="0" width="20" height="20" fill="red" transform="translate"> <animateTransform attributeName="transform" begin="0s" dur="3s" type="translate" from="0 0" to="200 200" repeatCount="indefinite" /> </rect> </svg> <svg width="500" height="300" style="border:1px solid gray;"> <path id="motionpath1" d="M70,100 C 0,300 300,300 400,200 C 520,70 120,-40 70,100" fill="none" stroke="silver" stroke-width="2" /> <path d="M-12,12 h48 v-24 h-48 z" fill="red" > <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#motionpath1"/> </animateMotion> </path> </svg>