To get started, copy the source code of the maze into your editor:
http://steamcoded.org/lessons/easymaze.svg.txt
and save the file as Maze.svg and open the file in a browser.
The maze is on top of a 1300x1300 grid with major lines every 100 units and minor lines every 50 units.
Can you code the solution to the maze?
The <path> element is the most used element in SVG. It has a defintion attribute (d) that contains commands
on how each segment of the path should be drawn. Using the path commands any shape can be drawn.
The solution to the maze only requires commands M and L. M is the moveto command and does not draw anything, but defines the
start of a path segment. L is the lineto command and draws a line to the end of the path segment.
Path commands are case sensitive. Capital (Uppercase) letters are used with absolute coordinates. Lowercase letters
are used with relative coordinates - relative to the end of the previous path segment.
Path commands are all run together, for example, drawing a line from (10,20) to (50,100) might look like this:
<path d="M10,20L50,100" /> or <path d="M10,20l40,80" />
To continue the line drawn, just add a lineto command at the end, for example to continue the line to (100,50), add
L100,50 to the end of the path d attribute, so the path command might now look like this:
<path d="M10,20L50,100L100,50" /> or <path d="M10,20l40,80l50,-50" />
1:
Modify the path definition (d attribute) of the path with id="solutions" to move through the maze.
The path defintion is started for you, d="M50,-25l0,25", and moves to the entrance of the maze.
2:
Challenge: If you used absolute commands, try relative commands. If you used relative commands, try absolute commands.
3:
Optional Challenge: Add Q commands to round the turns through the maze.
The Quadratic Bezier Curve (Q) command takes 2 coordinate points.
The first point is the Bezier curve control point, and the second point is the ending point.
Like the other path commands, absolute points use an uppercase Q and relative points use a lowercase q.
