The Great, White, North! Eh!
You know, the problem with us Canadians is that sometimes, after a long day of moose hunting and dam repairing, we forget our way back to our cabins! Wouldn't it be great if our handy laptop (which, is always at our side), had some way to point us home? Well, it's been long told that, if you display a compass on your computer, it will be the brightest when pointed North. I'd like to test this out, but I need a compact program to take with me on my next trip, because my hard drive is already filled with maple syrup recipes (and those CANNOT go). So, your task is to design me a program which, when run, saves or displays an image of the following compass rose:

The letters may be in a different font. Remember, least is best, so lowest byte count wins!
Specifications
Colors

Light purple: #9999FF
Gray: #E5E5E5

Lengths and Angles


Angle a = 45°
Angle b = 90°
Length c = 250 units
Length d = 200 units
Length e = 40 units
Length f = 45 units

Clarifications

The text may be in any appropriate font, where appropriate denotes that it is readable to the average, educated human being.
The text must be 3 units away from the spikes at its closest point, must not touch the rose, and must be upright
If a line is drawn from the center of the rose, through the end point of the spike and beyond, it should cross through the center of the text with a precision of +/- 2 units (the text must be centered along an axis a, where a extends from the middle of the page, through the end of the spike, and beyond)
Each character must be at least 15 units by 15 units, and have an x/y or y/x ratio of no more than 2:1 (no stretching – readability)
The dim circle passing through the longer spikes and text closest to the middle on the reference image is not to be drawn.
The image must be square, and at least 400px by 400px
A compressed image within the source is disallowed
A unit must be at least 1 pixel
HTML + CSS, 487 + 189 = 676

The compass rose is constructed from CSS borders using the triangle technique and some basic transformations. The letters are just given fixed positions, so that turned out quite long :/

The snippet below is scaled down so that it all fits. You can check out the JSFiddle here. Also, I'm not sure how well the letters will line up on different browsers (with different fonts, default styles, etc.).



html{transform:scale(0.2)}body{margin:5em}hr{margin:0;float:left;border:250px solid transparent;border-right:58px solid #E5E5E5;border-bottom:58px solid #9999FF}a{position:fixed;width:616px;font-size:4em}#a{transform:rotate(90deg)}#b{transform:rotate(270deg)}#c{transform:rotate(180deg)}#d{transform:rotate(45deg)scale(.8)}#n{top:20px;left:365px}#e{top:356px;left:700px}#s{top:700px;left:370px}#w{top:356px;left:10px}#N{top:150px;left:550px}#E{top:560px;left:550px}#S{top:560px;left:140px}#W{top:150px;left:140px}
&lt;a id=n&gt;N&lt;/a&gt;&lt;a id=e&gt;E&lt;/a&gt;&lt;a id=s&gt;S&lt;/a&gt;&lt;a id=w&gt;W&lt;/a&gt;&lt;a id=N&gt;NE&lt;/a&gt;&lt;a id=E&gt;SE&lt;/a&gt;&lt;a id=S&gt;SW&lt;/a&gt;&lt;a id=W&gt;NW&lt;/a&gt;&lt;a id=d&gt;&lt;hr&gt;&lt;hr id=a&gt;&lt;hr id=b&gt;&lt;hr id=c&gt;&lt;/a&gt;&lt;a&gt;&lt;hr&gt;&lt;hr id=a&gt;&lt;hr id=b&gt;&lt;hr id=c&gt;&lt;/a&gt;