SVG Lesson Plan

Lesson Plan:

Coding an Atom with animation in SVG

Objective:

Hands-on learning of SVG by drawing an atom with animation of electrons on a path.
Introduces the path Arc command for drawing an elliptical arc using the path element.
Introduces the <animateMotion> element which moves an object along a path and the <mpath> element which references the path used in the animation.

Lab Time:

Approximately 1 hour, not including Lecture time. Students should copy and paste lines, and then change the attribute values to greatly reduce typing time and typos.

Age range:

4-12th grades, or any age student unfamiliar with SVG

Requirements:

Familiar with a simple text editor like Notepad on Windows, or Text Wrangler on a Mac.
Familiar with copy and paste shortcuts (ctrl-c and ctrl-v on windows and command-c and command-v on a Mac).
Ability to save file with a .svg extension.
Should be familiar with adding <g>, <path>, and <circle> elements in SVG

Resources:

Free eBook for the iPad Learn SVG Interactively, by Jay Nick
http://www.w3schools.com/svg/default.asp
https://www.w3.org/TR/SVG11/
https://www.w3.org/TR/SVG/animate.html#AnimateMotionElement
https://www.w3.org/TR/smil-animation/#animateMotionElement

Lecture:

Introduce the <path> Arc command in the eBook, Learn SVG Interactively, and the <animateMotion> and <mpath>elements.
Review syntax of SVG elements having child elements, i.e. using beginning and ending tags, and the rotate transformation

Procedure:

Give the students the instructions on pages 4-5.
Have students create an SVG element with a viewBox="0 0 400 400" in the text editor.
Save the file as atom.svg then open in a browser. Keep the text editor and browser windows open.
Save and refresh the browser regularly to see if errors were introduced and what effect the code had.

Take Away:

Students should feel comfortable creating SVG images from scratch.
Students should get a feel for the <path> element Arc command.
Students should understand the syntax for SVG elements with child elements.

Additional Activity

Students can change the path command to have the electrons behave differently.
Change the path style to stroke:none to remove elliptical arc visibility
Advanced students can create an atom from the periodic chart.

1:

Create an SVG image with a viewBox="0 0 400 400"

2:

Create a group element with a rotate transformation: rotate 0 degrees about (200,200)

3:

Create a path element as a child of the group with id="p1"
style="fill:none;stroke:rgb(200,200,200);stroke-dasharray:3,2;"
d="M150,200A50,150,0,0,1,250,200A50,150,0,0,1,150,200z"

Note: the path starts at (150,200), then draws an elliptical arc (A) with x-radius of 50, y-radius of 150, flags of 0,0,1 and ends at (250,200), then draws another arc (A) from that point with the same x & y radius and flags and ends at (150,200) which is the starting point of the path. A z command is included at the end to make sure the path is completely closed.

4:

Create a circle element as a child of the group; radius: 5, style: fill:red
Note: the element will have child elements.

5:

Create an animateMotion element as a child element of the circle with attributes:
dur="1s" repeatCount="indefinite" The element will have a child element.

6:

Create a mpath element as a child of the animateMotion element with attribute: xlink:href="#p1"

7:

Copy the grouping and paste it after the group, then delete the path element and change the rotation angle to 180 degrees

8:

Copy both groupings and paste it after the 2 groupings, then change:
group rotate transformation angles to 60 and 240
Both groups: circle style to fill:blue
Both groups: animateMotion duration to 1.1s

9:

Paste the copied groups again after the step 8 groups, then change:
group rotate transformation angles to 120 and 300
Both groups: circle style to fill:green
Both groups: animateMotion duration to 1.2s

10:

Create a group element after the last grouping with attributes:
id="nucleus" style="stroke:rgb(150,150,150);stroke-width:0.5px;"

11:

Create 4 circle elements as child elements of the last grouping
Circle center: (204,196), radius: 8, style: fill:cyan
Circle center: (194,194), radius: 8, style: fill:orange
Circle center: (194,200), radius: 8, style: fill:cyan
Circle center: (206,206), radius: 8, style: fill:orange

1:

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<svg>

2:

3:

<path id="p1" d="M150,200A50,150,0,0,1,250,200A50,150,0,0,1,150,200z"

style="fill:none;stroke:rgb(200,200,200);stroke-dasharray:3,2;" />

4:

5:

6:

7:

</animateMotion>

</circle>
</g>

8:

</animateMotion>

</circle>
</g>
<g transform="rotate(240,200,200)">

</animateMotion>

</circle>
</g>

9:

</animateMotion>

</circle>
</g>
<g transform="rotate(300,200,200)">

</animateMotion>

</circle>
</g>

10-11: