The SVG Hypercube

I have some time on my hands and decided to kill a couple of TODOs which have been on my list for quite a while. I'm planning on using some SVG magic to create a Firefox extension, so I decided to practice some SVG and get better acquainted with it. It's pretty simple once you get the hang of it. This is actually my second incursion into the SVG world. The other image I created might make it to the world eventually, but not just now.
This image is something I saw in one of my classes, and I thought it was interesting to draw. It's a 4-dimensional hypercube. I highlighted one of the cubes that compose it so that it's a little easier to see.
In reality, the image is created with 2 concentric octagons, the external having a side length of x and the internal having a side length of x / (1 + 2^(1/2)). If you look at the source of the image (just open the source of this page), you'll see it pretty simple to draw. It took a while to figure all the dimensions out, but it's fun if you're a math geek.
Update: I had a hard time trying to get this to work inline, but then I realized Firefox doesn't have inline SVG enabled for some reason. I also seem to have problems uploading the file elsewhere, so laziness won and I decided to post the source only. If you want to see the image just copy the following source, save it as hypercube.svg (or whatever other name you like) and open the file in Firefox (or any other SVG viewer). Sorry for the trouble.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<!--
- 4 dimensional hypercube on SVG.
- Author: Jorge Villalobos
-->
<svg:svg id="hypercube" viewBox="0 0 600 600" xmlns:svg="http://www.w3.org/2000/svg" version="1.1">
<svg:style type="text/css"><![CDATA[
.border {fill:none;stroke: grey;stroke-width:1}
.highlight {fill:none;stroke: blue;stroke-width:1}
]]></svg:style>
<!-- External octagon -->
<svg:path class="border" d="M 176 0 L 424 0 L 600 176 L 600 424 L 424 600 L 176 600 L 0 424 L 0 176 z" />
<!-- Internal connections -->
<svg:path class="border" d="M 176 0 L 351 176 L 600 176 L 424 351 L 424 600 L 249 424 L 0 424 L 176 249 z" />
<svg:path class="border" d="M 249 176 L 424 0 L 424 249 L 600 424 L 351 424 L 176 600 L 176 351 L 0 176 z" />
<!-- 8 point star -->
<svg:path class="border" d="M 249 176 L 424 351 L 176 351 L 351 176 L 351 424 L 176 249 L 424 249 L 249 424 z" />
<!-- Highlighted cube -->
<svg:rect class="highlight" x="176" y="351" width="249" height="249" />
<svg:rect class="highlight" x="351" y="176" width="249" height="249" />
<svg:path class="highlight" d="M 176 351 L 351 176 M 424 351 L 600 176 M 424 600 L 600 424 M 176 600 L 351 424" />
</svg:svg>

---