APEX@IGP

Infogrid Pacific-The Science of Information

27

SVG Primitives. Basic Interactive Animation

SVG Primitives can be animated in a number of ways using the SMIL specification. It's not hard. You just have to get your head around a few basic techniques. Modified: 20 December 2015.

alt

This page is still under development

It is made available so those interested can see the SVG Primitive action plan in progress.

alt

Are you an Education Publisher?

If you are publishing K-12 education content you need to carefully read and understand the value of SVG Primitives.

The IGP:Digital Publisher SVG Primitives and MathML Libraries will save you THOUSANDS of hours of production time while unleashing new and unique learning products.

Get off the InDesign, Inkling and iPublish "treadmill products". Get creative, original and create real learning content.

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.

Do you want to learn how to make great handcrafted SVG?

Visit our new  Interactive SVG Tutorial Site here ►.

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).

The Triangle

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.

Know Your Triangles

Six triangles are animated showing their line and angle patterns. LEARN YOUR TRIANGLES EQUILATERAL TRIANGLE 60° 60° 60° Three sides the same length Three angles the same ISOSCELES TRIANGLE Two sides the same length Two angles the same SCALENE TRIANGLE All sides different lengths All angles are different RIGHT ANGLE TRIANGLE 90° One Right Angle ACUTE TRIANGLE All angles less than 90° OBTUSE TRIANGLE One angle greater than 90° GO

Animated Triangles

This simple step through of the major triangle names is made more complex by the addition of tick marks, angles and the various labels.

It is a reasonable example of the type of animation that is best provided pre-created and then can be styled and positioned as required.

View the SVG

Check out the How To Article with a focus on angle markers that work for lines, triangles and rectangles.

The Circle

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:

THE PROPERTIES OF A CIRCLE Center Radius Diameter Circumference Area

Circle Measurements

In this example we are using the basic circle SVG Primitive and three dimension lines with markers.

This three line/paths for each of diameter, radius and circumference. The paths can be hidden or removed as required, or even animated.

The circumference starts at 0 degrees and rotates anticlockwise.

The diameter is drawn from left to right.

The radius is drawn from the center to the circumference.

Click on the words to see the animations.

View the SVG

 

 

 

<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>
<svg height="400" viewBox="0 0 400 400" width="400">
    <marker id="marker2" markerHeight="8" markerUnits="strokeWidth" markerWidth="10" orient="auto" refX="4" refY="4">
        <path d="M 0 0 L 10 4 L 0 8 L2 4 z" fill="orange"></path>
    </marker>
    <marker id="marker3" markerHeight="8" markerUnits="strokeWidth" markerWidth="10" orient="auto" refX="4" refY="4">
        <path d="M 0 4 L 10 0 L 8 4 L 10 8 z" fill="orange"></path>
    </marker>
    <circle cx="200" cy="200" fill="transparent" r="150" stroke="black" stroke-width="2"></circle>
    <g>
        <line marker-end="url(#marker3)" stroke="orange" stroke-width="2" x1="200" x2="200" y1="200" y2="200">
            <animate attributeName="y2" begin="radius.click" dur="2s" fill="freeze" id="r" to="65"></animate>
            <animateTransform attributeName="transform" begin="r.end" dur="5s" from="0 200 200" id="animatetransform2" repeatCount="1" to="-360 200 200" type="rotate"></animateTransform>
        </line>
    </g>
    <g>
        <line fill="transparent" marker-end="url(#Arrow-End)" marker-start="url(#Arrow-Start)" stroke="orange" stroke-width="2" x1="60" x2="60" y1="199" y2="199">
            <animate attributeName="x2" begin="dia.click" dur="2s" fill="freeze" id="d" to="335"></animate>
            <animateTransform attributeName="transform" begin="d.end" dur="5s" from="0 200 200" id="animatetransform3" repeatCount="1" to="-180 200 200" type="rotate"></animateTransform>
        </line>
    </g>
    <g>
        <path d="M 360 190 A 160 160, 0, 1, 0, 360 215" fill="transparent" id="c" marker-end="url(#Arrow-End)" stroke="orange" stroke-dasharray="1000 1000" stroke-dashoffset="1000" stroke-width="2">
            <animate attributeName="stroke-dashoffset" begin="circum.click" dur="5s" fill="freeze" from="1000" id="animate1" to="0"></animate>
        </path>
    </g>
    <circle cx="199" cy="199" fill="red" r="3"></circle>
    <text class="t24 bold t-mid" cursor="pointer" id="title" x="200" y="30">THE PROPERTIES OF A CIRCLE</text>
    <text class="t20 t-right" cursor="pointer" id="center" x="210" y="220">Center</text>
    <text class="t20 t-right" cursor="pointer" id="radius" x="210" y="150">Radius</text>
    <text class="t20 t-right" cursor="pointer" id="dia" x="100" y="190">Diameter</text>
    <text class="t20 t-mid" cursor="pointer" id="circum" x="300" y="50">Circumference</text>
    <text class="t20 t-mid" cursor="pointer" id="area" x="200" y="390">Area</text>
</svg>
<br>

 

 

 

 

comments powered by Disqus