WAPG 6 SVG Animation Programming SMIL JavaScript CSS
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>