Octogon unroll

by chrisfrisina

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1000px" width="1000px">
    <g id="8">
        <path d="M133,1 166,1 200,33 200,66 166,100 133,100 100,66 100,33 133,1" fill="none" stroke="black"/>
    </g>
    <g id="7">
        <path d="M133,102 166,102 200,102 233,133 233,166 200,200 166,200 133,166 133,133" fill="none" stroke="black"/>
    </g>
    <g id="6">
        <path d="M133,202 166,202 200,202 233,202 266,233 266,266 233,300 200,300 166,266" fill="none" stroke="black"/>
    </g>
    <g id="5">
        <path d="M133,302 166,302 200,302 233,302 266,302 300,333 300,366 266,400 233,400" fill="none" stroke="black"/>
    </g>
    <g id="4">
        <path d="M133,402 166,402 200,402 233,402 266,402 300,402 333,433 333,466 300,500" fill="none" stroke="black"/>
    </g>
<!-- asdf         1        2       3      4       5       6       7       8       9 -->
    <g id="3">        
        <path d="M133,502 166,502 200,502 233,502 266,502 300,502 333,502 366,533 366,566 " fill="none" stroke="black"/>
    </g>
    <g id="2">
        <path d="M133,602 166,602 200,602 233,602 266,602 300,602 333,602 366,602 402,633 " fill="none" stroke="black"/>
    </g>
    <g id="1">
        <path d="M133,702 166,702 200,702 233,702 266,702 300,702 333,702 366,702 402,702 " fill="none" stroke="black"/>
    </g>

</svg>