Skip to content

Instantly share code, notes, and snippets.

@bkawk

bkawk/hexmagic

Created February 12, 2019 03:25
Show Gist options
  • Save bkawk/e6a1e6e46e6696fce6d7857f2cc8094b to your computer and use it in GitHub Desktop.
Save bkawk/e6a1e6e46e6696fce6d7857f2cc8094b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hexmagic
<svg viewBox="-1000 -1200 2000 2000" style="max-width: 750px;">
<g transform="rotate(-30)" fill="white" stroke="black">
<g class="grid">
<g transform="translate(-450,-260)">
<g class="r-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-3</tspan>
<tspan x="44" y="-16" class="r-coord">0</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-450,-87)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-3</tspan>
<tspan x="44" y="-16" class="r-coord">+1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-450,87)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-3</tspan>
<tspan x="44" y="-16" class="r-coord">+2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-450,260)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-3</tspan>
<tspan x="44" y="-16" class="r-coord">+3</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-300,-346)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-2</tspan>
<tspan x="44" y="-16" class="r-coord">-1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-300,-173)">
<g class="r-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-2</tspan>
<tspan x="44" y="-16" class="r-coord">0</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-300,0)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-2</tspan>
<tspan x="44" y="-16" class="r-coord">+1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-300,173)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-2</tspan>
<tspan x="44" y="-16" class="r-coord">+2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-300,346)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-2</tspan>
<tspan x="44" y="-16" class="r-coord">+3</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-150,-433)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-1</tspan>
<tspan x="44" y="-16" class="r-coord">-2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-150,-260)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-1</tspan>
<tspan x="44" y="-16" class="r-coord">-1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-150,-87)">
<g class="r-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-1</tspan>
<tspan x="44" y="-16" class="r-coord">0</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-150,87)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-1</tspan>
<tspan x="44" y="-16" class="r-coord">+1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-150,260)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-1</tspan>
<tspan x="44" y="-16" class="r-coord">+2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(-150,433)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">-1</tspan>
<tspan x="44" y="-16" class="r-coord">+3</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(0,-520)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">0</tspan>
<tspan x="44" y="-16" class="r-coord">-3</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(0,-346)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">0</tspan>
<tspan x="44" y="-16" class="r-coord">-2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(0,-173)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">0</tspan>
<tspan x="44" y="-16" class="r-coord">-1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(0,0)">
<g class="origin r-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">q</tspan>
<tspan x="44" y="-16" class="r-coord">r</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(0,173)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">0</tspan>
<tspan x="44" y="-16" class="r-coord">+1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(0,346)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">0</tspan>
<tspan x="44" y="-16" class="r-coord">+2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(0,520)">
<g class="s-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">0</tspan>
<tspan x="44" y="-16" class="r-coord">+3</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(150,-433)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+1</tspan>
<tspan x="44" y="-16" class="r-coord">-3</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(150,-260)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+1</tspan>
<tspan x="44" y="-16" class="r-coord">-2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(150,-87)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+1</tspan>
<tspan x="44" y="-16" class="r-coord">-1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(150,87)">
<g class="r-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+1</tspan>
<tspan x="44" y="-16" class="r-coord">0</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(150,260)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+1</tspan>
<tspan x="44" y="-16" class="r-coord">+1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(150,433)">
<g class="s-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+1</tspan>
<tspan x="44" y="-16" class="r-coord">+2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(300,-346)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+2</tspan>
<tspan x="44" y="-16" class="r-coord">-3</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(300,-173)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+2</tspan>
<tspan x="44" y="-16" class="r-coord">-2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(300,0)">
<g class="">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+2</tspan>
<tspan x="44" y="-16" class="r-coord">-1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(300,173)">
<g class="r-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+2</tspan>
<tspan x="44" y="-16" class="r-coord">0</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(300,346)">
<g class="s-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+2</tspan>
<tspan x="44" y="-16" class="r-coord">+1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(450,-260)">
<g class="q-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+3</tspan>
<tspan x="44" y="-16" class="r-coord">-3</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(450,-87)">
<g class="q-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+3</tspan>
<tspan x="44" y="-16" class="r-coord">-2</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(450,87)">
<g class="q-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+3</tspan>
<tspan x="44" y="-16" class="r-coord">-1</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(450,260)">
<g class="highlight q-axis-same r-axis-same s-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+3</tspan>
<tspan x="44" y="-16" class="r-coord">0</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
<g transform="translate(600,260)">
<g class="highlight q-axis-same r-axis-same s-axis-same">
<polygon points="100,0 50,-87 -50,-87 -100,-0 -50,87 50,87"></polygon>
<text transform="rotate(30)">
<tspan x="-52" y="-16" class="q-coord">+3</tspan>
<tspan x="44" y="-16" class="r-coord">0</tspan>
<tspan x="0" y="60" class="s-coord"></tspan>
</text>
</g>
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment