Learning to Code with SVG
Lesson Plan:
Coding Dashed Circles in SVG on a 600 by 600 grid
Objective:
Hands-on learning of SVG by drawing dashed circles and reusing them.
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 circumference of a circle.
Understanding of how scaling can be used to reduce or enlarge an object.
Lecture:
This lesson will draw 1 circle element on a 600x600 grid. The circle will be stroked with a dashed line.
By calculating the circumference of the circle, the dashed line can be made to finish perfectly, creating even spacing all
the way around the circle.
The circle element will be reused, reducing it's size each time using the scale transformation.
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 ellipses.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 how circumference is used to create an evenly spaced
dashed line around a circle. And, how scaling can be used to reduce the size of an object.
Additional Activity
Students can experiment with different dashed lines, i.e. dash to gap ratios,
to create an evenly spaced dashed line. And try circles with a different radius
What the Dashed Circles should look like - Page 2 of 4 in PDF
Instruction Sheet for Students - Page 3 of 4 in PDF
Coding Dashed Circles in SVG on a 600 by 600 grid
1:
Append the following attributes to the <g> element with style="opacity:0.5;"
Add style: "stroke:red;"
Add attribute: transform=translate(300,300)
2:
Create a <circle> element centered at (0,0) with radius: 290
Add attribute: style="fill:#333;stroke:none;"
3:
Create a group element <g> with id="i1"
4:
Create a <circle> element with id="c1" centered at (0,0) with radius: 280
Add attribute: style="fill:none;stroke-width:20px;stroke-dasharray:158.337,17.593;"
Circumference = 2*π*r = 2*π*280 = 1759.3
Creating 10 segments requires each to be 175.93
Dividing each segement with a dash to gap ratio of 9 to 1 yields dash of 158.337 and gap of 17.593
5:
Add a <use> element with attributes:
xlink:href="#c1"
transform="scale(0.9)"
style="stroke:orange"
6:
Create additional <use> elements like step 5
scaling each 0.8, 0.7, 0.6, 0.5, 0.4, and
stroke each yellow, lime, blue, indigo, violet
7:
Add a <use> element outside group with id="i1" with attributes:
xlink:href="#i1"
transform="scale(0.333)"
8:
Add another <use> element attributes:
xlink:href="#i1"
transform="scale(0.111)"
9:
Add a rotate transformation after the translate(300,300) to rotate the image 1.8 degrees
transform="translate(300,300) rotate(1.8)
This will rotate the entire image by 1.8 degrees. Since 17.593 is 1/100 of the circumference, 360/100 = 3.6. Rotating 1/2 of the
3.6 = 1.8 degrees centers the image for a clean look.
When complete, change the style attribute of the first element
from "display:initial" to "display:none" which hides the grid.
Then change the style attribute of the second element
from "opacity:0.5" to "opacity:1"
Answer Sheet for Instructor - Page 4 of 4 in PDF
Coding Rotating Ellipses in SVG on a 600 by 600 grid
Answer Sheet
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.
1:
<g style="opacity:0.5;stroke:red;" transform="translate(300,300)">
2:
<circle cx="0" cy="0" r="290" style="fill:#333;stroke:none;" />
4:
<circle id="c1" cx="0" cy="0" r="280"
style="fill:none;stroke-width:20px;stroke-dasharray:158.337,17.593;" />
5:
<use xlink:href="#c1" transform="scale(0.9)" style="stroke:orange;" />
6:
<use xlink:href="#c1" transform="scale(0.8)" style="stroke:yellow;"" />
<use xlink:href="#c1" transform="scale(0.7)" style="stroke:lime;" />
<use xlink:href="#c1" transform="scale(0.6)" style="stroke:blue;" />
<use xlink:href="#c1" transform="scale(0.5)" style="stroke:indigo;" />
<use xlink:href="#c1" transform="scale(0.4)" style="stroke:violet;" />
7:
<use xlink:href="#i1" transform="scale(0.333)" />
8:
<use xlink:href="#i1" transform="scale(0.111)" />
9:
<g style="opacity:0.5;stroke:red;" transform="translate(300,300) rotate(1.8)">
