It is now time to take SVG to a logical learning content target. The animation of geometric principles where shape ideas are exposed, illuminated and made to move.
SMIL animation on SVG is reasonably straight-forward. The significant advantage of SMIL animation in SVG is no scripting. Sure it takes a little learning, it is verbose, it needs a bit of thinking; but it is very effective.
SVG animation is supported on Android and FirefoxOS mobile devices, but does need to be used with caution if performance is to be reasonable.
As we developed these animation SVG Primitives it became clear that it is not just what you do, but how you do it that is important. The production of geometry (and science) illustrations is relatively time-consuming and expensive whether you do it on the desktop or in a specialist environment. Add animation to this and the tools that are available mean costs escalate beyond the resources of many publishers.
The advantage of the SVG approach is the artwork only has to be produced once for all formats. That means print, e-Books, online sites, SCORM for LMS and with or without animation.
There are not a lot of people out there who can animate SVG using SMIL. It is somewhat of an arcane art. In 2013 everyone wants to dive for the "Javascript gun". While Javascript is great and has its' place, the downside is a significant lack of reusability and higher costs.
It is reasonable to state that Javascript is for programmers. This means that reasonable instructional designers and interactive developers have to "outsource" the Javascript production elements. This increases costs and development times significantly. Many animation concepts do not need Javascript. Another significant advantage of SVG with SMIL animation is that accessibility tools are build-in. That means it is straight-forward to produce highly accessible content.
In this article we demostration a few animation SVG Primitives demonstrating core concepts. The learner can play these as many times as required (never under-estimate the value of repitition in learning).
Either the triangle or circle is the most amazing geometrical shape. The triangle is the strongest, the circle the weakest. Triangles do so much work. They let us know where we are, they create the strongest buildings in the world. More than any other shape they are complete.
How do we pass the amazing wonders of triangles to young minds? Especially those who don't have access to teaching resources. The power of animation lets us show the diverse nature of triangles as a stepping stone to more knowledge.
Check out the How To Article with a focus on angle markers that work for lines, triangles and rectangles.
A circle is what it is. It's position and diameter can change, but little else otherwise it is an ellipsis (another awesomely interesting geometric shape).
Internally the circle reveals undreamed-of secrets. Simple harmonic motion, sines, cosines and tangents, plus a host of other of lifes rythmic properties that can stun and expand the young mind before moving on to the mystical worlds of trigonometry and algebra.
Circles opens the astonishing world of pi, a radical and new unit of measurement other than those boring old counting and measuring things. And it all starts with this:
<svg height="400" width="400" x="0" y="0" viewBox="0, 0, 400,400" overflow="hidden">
<title>Animated Triangles</title>
<desc>Six triangles are animated showing their line and angle patterns. </desc>
<rect class="f-yellow" opacity="0.5" x="0" y="0" width="400" height="400" />
<!-- TRIANGLE ANIMATION -->
<path class="l4 f-white s" d="M200,50 L350,300 L50,300 z" >
<animate id="equilateral"
attributeName="d"
attributeType="XML"
values="M200,50 L350,300 L50,300 z;
M200,50 L300,300 L100,300 z"
begin="go.click+4.75s"
dur="0.25s"
fill="freeze">
</animate>
<animate id="isosceles"
attributeName="d"
attributeType="XML"
values="M200,50 L300,300 L100,300 z;
M125,100 L350,300 L50,300 z"
begin="equilateral.end+4.75s"
dur="0.25"
fill="freeze">
</animate>
<animate id="scalene" attributeName="d"
attributeType="XML"
values="M125,100 L350,300 L50,300 z;
M50,50 L350,300 L50,300 z"
begin="isosceles.end+4.75s"
dur="0.25s"
fill="freeze">
</animate>
<animate id="right"
attributeName="d"
attributeType="XML"
values="M50,50 L350,300 L50,300 z;
M250,100 L350,300 L50,300 z"
begin="scalene.end+4.75s"
dur="0.25s"
fill="freeze">
</animate>
<animate id="acute"
attributeName="d"
values="M250,100 L350,300 L50,300 z;
M350,100 L250,300 L50,300 z"
begin="right.end+4.75s"
dur="0.25s"
fill="freeze">
</animate>
<animate id="obtuse"
attributeName="d"
values="M350,100 L250,300 L50,300 z;
M200,50 L350,300 L50,300 z"
begin="acute.end+4.75s"
dur="0.25s"
fill="freeze">
</animate>
</path>
<!-- TEXT ANIMATION -->
<!-- OUTER ANIMATION DISPLAY CONTROL -->
<g opacity="1">
<text class=" t24 t-mid bold f-blue" opacity="1" x="200" y="30">LEARN YOUR TRIANGLES
<animate id="tt"
attributeName="opacity"
attributeType="XML"
dur="30s"
values="1; 0; 0; 1"
keyTimes="0; 0.01; 0.99; 1"
begin="go.click"
fill="remove">
</animate>
</text>
</g>
<!-- ANIMATION STEP 1 Equilateral -->
<g opacity="0">
<animate id="g1"
attributeName="opacity"
attributeType="XML"
dur="5s"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.1; 0.9;0.91; 1"
begin="go.click"
fill="remove">
</animate>
<text class=" t24 t-mid bold f-blue" x="200" y="30">EQUILATERAL TRIANGLE</text>
<g class="t24 f-dmagenta t-mid">
<text x="200" y="120">60°</text>
<text x="120" y="280">60°</text>
<text x="290" y="280">60°</text>
</g>
<g class="t-start t20">
<text x="40" y="120">Three sides</text>
<text x="40" y="140">the same </text>
<text x="40" y="160">length</text>
</g>
<g class="t-end t20">
<text x="370" y="120">Three angles</text>
<text x="370" y="140">the same</text>
</g>
<g transform="translate(150,0) rotate(-240 50 50)">
<path class="linearc" d="M95,50 A 45, 45, 0, 0, 0, 73, 11 " />
</g>
<g transform="translate(0,250) rotate(0 50 50)">
<path class="linearc" d="M95,50 A 45, 45, 0, 0, 0, 73, 11 " />
</g>
<g transform="translate(300,250) rotate(-120 50 50)">
<path class="linearc" d="M95,50 A 45, 45, 0, 0, 0, 73, 11 " />
</g>
<g transform="translate(130, 150) ">
<path class="linearc" d="M 0,0 L 0,30"
transform="rotate(-60 0 15)" />
</g>
<g transform="translate(200, 285) ">
<path class="linearc" d="M 0,0 L 0,30"
transform="rotate(0 0 15)" />
</g>
<g transform="translate(270, 150) ">
<path class="linearc" d="M 0,0 L 0,30"
transform="rotate(60 0 15)" />
</g>
</g>
<!-- ANIMATION STEP 2 67deg Isosceles-->
<g opacity="0">
<animate id="t2"
attributeName="opacity"
attributeType="XML"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.1; 0.9;0.91; 1"
dur="5s"
begin="equilateral.end"
fill="remove">
</animate>
<text class=" t24 t-mid bold f-blue" x="200" y="30">ISOSCELES TRIANGLE</text>
<g class="t-start t20">
<text x="50" y="120">Two sides</text>
<text x="50" y="140">the same </text>
<text x="50" y="160">length</text>
</g>
<g class="t-end t20">
<text x="350" y="120">Two angles</text>
<text x="350" y="140">the same</text>
</g>
<g class="linearc" transform="translate(150,0) rotate(-250 50 50)">
<path d=" M95,50 A 45, 45, 0, 0, 0, 84, 22" />
</g>
<g class="linearc" transform="translate(50,250) rotate(0 50 50)">
<path d=" M95,50 A 45, 45, 0, 0, 0, 66, 8
M85,50 A 35, 35, 0, 0, 0, 62, 17" />
</g>
<g class="linearc" transform="translate(250,250) rotate(-113 50 50)">
<path d=" M95,50 A 45, 45, 0, 0, 0, 66, 8
M85,50 A 35, 35, 0, 0, 0, 62, 17" />
</g>
<g transform="translate(140, 180) ">
<path class="linearc" d="M 0,0 L 0,30 M 10,0 L 10,30"
transform="rotate(-70 0 15)" />
</g>
<g transform="translate(260, 180) ">
<path class="linearc" d="M 0,0 L 0,30 M 10,0 L 10,30"
transform="rotate(70 0 15)" />
</g>
</g>
<!-- ANIMATION STEP 3 Scalene -->
<g opacity="0">
<animate id="t4"
attributeName="opacity"
attributeType="XML"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.1; 0.9;0.91; 1"
dur="5s"
begin="isosceles.end"
fill="remove">
</animate>
<text class=" t24 t-mid bold f-blue" x="200" y="30">SCALENE TRIANGLE</text>
<g class="t-start t20">
<text x="25" y="120">All sides</text>
<text x="25" y="140">different </text>
<text x="25" y="160">lengths</text>
</g>
<g class="t-end t20">
<text x="300" y="120">All angles</text>
<text x="300" y="140">are different</text>
</g>
<g transform="translate(75, 50) rotate(-250 50, 50)">
<path class="linearc" d="M95,50 A 45, 45, 0, 0, 0, 65, 8 " />
</g>
<g transform="translate(0, 250) ">
<path class="linearc" d="M95,50 A 45, 45, 0, 0, 0, 65, 8
M85,50 A 35, 35, 0, 0, 0, 62, 17 " />
</g>
<g transform="translate(300, 250) rotate(-140 50, 50)">
<path class="linearc" d="M95,50 A 45, 45, 0, 0, 0, 85, 20
M85,50 A 40, 40, 0, 0, 0, 78, 27
M105,50 A 50, 50, 0, 0, 0, 92, 15" />
</g>
<g transform="translate(200, 285) ">
<path class="linearc" d="M 0,0 L 0,30"
transform="rotate(0 15)" />
</g>
<g transform="translate(215, 175) ">
<path class="linearc" d="M 0,0 L 0,30 M 10,0 L 10,30"
transform="rotate(38 10 15)" />
</g>
<g transform="translate(70, 180) ">
<path class="linearc" d="M 0,0 L 0,30 M 10,0 L 10,30 M 20,0 L 20,30"
transform="rotate(-70 20 15)" />
</g>
</g>
<!-- ANIMATION STEP 4 Right Angle-->
<g opacity="0">
<animate id="t3"
attributeName="opacity"
attributeType="XML"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.1; 0.9;0.91; 1"
dur="5s"
begin="scalene.end"
fill="remove">
</animate>
<g transform="translate(0, 250) ">
<path class="linearc"class="fill-none" d="M50,10 l40 0 l 0 40 " />
</g>
<text class=" t24 t-mid bold f-blue" x="200" y="30">RIGHT ANGLE TRIANGLE</text>
<text class="angletext" x="120" y="260">90°</text>
<g class="t-end t20" >
<text x="350" y="150">One Right Angle</text>
</g>
</g>
<!-- ANIMATION STEP 5Acute -->
<g opacity="0">
<animate id="t5"
attributeName="opacity"
attributeType="XML"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.1; 0.9;0.91; 1"
begin="right.end"
dur="5s"
fill="remove">
</animate>
<text class=" t24 bold f-blue t-mid" font-size="24" x="200" y="30">ACUTE TRIANGLE</text>
<g class="t-end t20">
<text x="370" y="120">All angles</text>
<text x="370" y="140">less than</text>
<text x="370" y="160">90°</text>
</g>
<g transform="translate(200, 50) rotate(-227 50 50)">
<path class="linearc" d=" M95,50 A 45, 45, 0, 0, 0, 64 8" />
</g>
<g transform="translate(0, 250) ">
<path class="linearc" d=" M95,50 A 45, 45, 0, 0, 0, 82, 21
M85,50 A 35, 35, 0, 0, 0, 72, 25" />
</g>
<g transform="translate(300, 250) rotate(-120 50 50)">
<path class="linearc" d=" M95,50 A 45, 45, 0, 0, 0, 72, 11
M85,50 A 35, 35, 0, 0, 0, 66, 22
M105,50 A 55, 55, 0, 0, 0, 80, 2" />
</g>
</g>
<!-- ANIMATION STEP 6 Obtuse -->
<g opacity="0">
<animate id="t6"
attributeName="opacity"
attributeType="XML"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.1; 0.9;0.91; 1"
begin="acute.end"
dur="5s"
fill="remove">
</animate>
<text class=" t24 t-mid bold f-blue" x="200" y="30">OBTUSE TRIANGLE</text>
<g>
<text class="t-end t20" x="370" y="230">One</text>
<text class="t-end t20" x="370" y="250">angle</text>
<text class="t-end t20" x="370" y="270">greater</text>
<text class="t-end t20" x="370" y="290"> than 90°</text>
</g>
<g transform="translate(200, 250) rotate(-60 50 50)">
<path class="linearc" d=" M95,50 A 45, 45, 0, 0, 0, 28, 11" />
</g>
</g>
<g transform="translate(150,355)">
<text class="bold t24 f-black" text-anchor="middle" x="50" y="24">GO</text>
<rect class="f-black" cursor="pointer" fill-opacity="0.4" height="30" rx="15" ry="15" id="go" width="100" x="0" y="0" />
</g>
</svg>
