⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

WAPG 6 SVG Animation Programming SMIL JavaScript CSS

Published : June 21, 2017   •   Last Edited : November 24, 2025   •   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>
▲