SVG paths
For our markers on the map we are going to be using what's is called SVG Paths. These are strings that give instruction for how a shape is to be constructed and the browser can interpret them and draw the shape.
How an SVG path works is by using single letter commands such as M, A, Q, S, M, L, C, etc with their relevant inputs after them space seperated. If you want more information look here.
For our purposes I used this website to create my SVG Paths and you can make your own here aswell.
The SVG Paths that I made are a Water Droplet, Grass, a Tree and a flower and they are as follows.
- M 17 13 L 15 16 C 14 18 15 19 17 19 C 19 19 20 18 19 16 L 17 13
- M 12 19 L 25 19 L 23 13 L 22 16 L 21 10 L 20 16 L 19 13 L 18 16 L 17 12 L 16 16 L 15 11 L 14 16 L 13 13 L 12 19
- M 17 18 L 17 22 L 15 22 L 15 18 Z L 10 19 L 15 15 V 15 L 15 15 L 11 16 L 15 13 V 13 L 13 13 L 16 11 L 19 13 L 17 13 V 13 L 21 16 L 17 15 V 15 L 22 19 L 17 18
- M128 0Q186.778525 47.098301 158.564833 85.931116Q186.778525 47.098301 249.735234 88.445825Q223.105652 158.901699 177.454939 144.068884Q223.105652 158.901699 203.236512 231.554175Q128 228 128 180Q128 228 52.763488 231.554175Q32.894348 158.901699 78.545061 144.068884Q32.894348 158.901699 6.264766 88.445825Q69.221475 47.098301 97.435167 85.931116Q69.221475 47.098301 128 0Q186.778525 47.098301 158.564833 85.931116z
As you can see the flower path is quite complicated as it needed to be scaled down and used some complex lines
Created by: John Yeomans