Working on figuring out the different svg shapes using d3.js. I was going to not do a path but decided to try to make a little arc for the corner kick spot. At first I was lazy and tried to approximate the radians that would make up a quarter of a circle, but I couldn’t sleep at night. So what I ended up doing is:
.startAngle(0 * (pi/180)) //converting from degs to radians
.endAngle(90 * (pi/180)) //just radiansSo now the first number entered is a regular old angle with 0 being the top of the circle and 90 being a right angle. If i just wanted a 45 degree slice of the circle I’d just enter 45 instead of 90 or ave a difference of 45 between the numbers being multiplied by pi/180.
So Why was I doing this? I pretty much wanted to get to know svg elements and what shapes I could easily throw down on a webpage using d3. Plus I wanted to get a handle on some of their basic attributes. Plus I wanted to know what the little arc at the top of the penalty area was from? A big circle from the goal line? no. A little circle from the penalty shot circle actually. Maybe one day I’ll get around to doing the other side of the pitch or making nice colors and not having lines where they shouldn’t be.
MDN page on svg path: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths