Lesson Plan:
Coding a Yin Yang Symbol in SVG on a 600 by 600 grid
Objective:
Hands-on learning of SVG by drawing a Yin Yang Symbol. Learning the path element Arc command to draw semicircles.
Lab Time:
Approximately 1/2 hour, not including Lecture time. Students should test each path command before
adding each additional command.
Age range:
4-8th grades, or any age student unfamiliar with SVG
Requirements:
Familiar with a simple text editor
Ability to save file with a .svg extension.
Understanding of concept of radius in both x and y directions.
Familiar with the radius of ellipse & circle elements in SVG
Lecture:
This lesson will draw 1 path element and 3 circle elements on a 600x600 grid. The path element will create
3 semicircles using the Arc Command 'A'.
The resulting shape formed from the 3 semicircles will create the Yin of the Yin Yang symbol.
The Arc command is followed by 7 parameters: x-radius, y-radius, angle to rotate, large arc flag, sweep flag,
ending x-coordinate, and ending y-coordinate.
For a arc on a semicircle, the starting and ending points will determine the radius to use.
Procedure:
Have students get an SVG template with 600x600 grid from:
http://steamcoded.org/lessons/grid600x600.svg.txt
Copy the code and paste it into a text editor.
Save the file as yinyang.svg then open in a browser. Keep the text editor and browser windows open.
Add SVG elements where indicated using the instructions on page 3 (see below).
Important: Students should save the file and refresh the browser after adding a few
SVG element to their file to make sure they don't have errors.
When complete, change the style attribute of the first <g> element
from "display:initial" to "display:none" which hides the grid
Then change the style attribute of the second <g> element
from "opacity:0.5" to "opacity:1"
Take Away:
Students should gain an understanding of the Arc command of the SVG path element.
Additional Activity
Students can change the x-radius of the arc commands to change the shape of the Yin Yang symbol.
To get started copy the code of this image into your editor:
http://steamcoded.org/lessons/grid600x600.svg.txt
and save the file as yinyang.svg and open the file in a browser.
In the editor, add the SVG elements (per instructions below) where indicated in the SVG code,
i.e. on the blank line below the comment line <!-- insert SVG elements here -->.
Important: Save the file and refresh the browser after each step.
1:
Create a <path> element with the following commands:
Moveto 300,0
Arc with x and y radius:150, rotate:0, large arc flag:0, sweep flag:1, ending at (300,300)
hint: M300,0A150,150,0,0,1,300,300
Add a style attribute with value: "fill:none;stroke:black;"
2:
Append an Arc command to the end of the path command. Note: the arc will start at the
ending coordinates of the arc command in step 1, i.e. (300,300)
Arc with x and y radius:150, rotate:0, large arc flag:0, sweep flag:0, ending at (300,600)
hint: A150,150,0,0,0,300,600
3:
Append another Arc command to the end of the path command. Note: the arc will start at the
ending coordinates of the arc command in step 2, i.e. (300,600)
Arc with x and y radius:300, rotate:0, large arc flag:0, sweep flag:0, ending at (300,0)
hint: A300,300,0,0,0,300,0
4:
Change the style attribute from "fill:none;stroke:black;" to "fill:black;stroke:none;"
5:
Before the path element, add a circle element centered at (300,300) with
a radius of 300 and style="fill:white;stroke:black;stroke-width:2px;"
6:
After the path element, add a circle element centered at (300,150) with
a radius of 30 and style="fill:black;"
7:
After the path element, add a circle element centered at (300,450) with
a radius of 30 and style="fill:white;"
Common mistakes are missing double quote marks around attribute values,
missing space between attributes, missing the start < and ending /> tags, using a semicolon
where a colon is required and vice-versa, and not putting elements in the correct order.
