Skip to content

Instantly share code, notes, and snippets.

@neuhaus
Created January 10, 2026 10:40
Show Gist options
  • Select an option

  • Save neuhaus/04b21742ae11e626cf4f8c8d0bae9613 to your computer and use it in GitHub Desktop.

Select an option

Save neuhaus/04b21742ae11e626cf4f8c8d0bae9613 to your computer and use it in GitHub Desktop.
othello board
Display the source blob
Display the rendered blob
Raw
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<style>
.A { --x: 0px; }
.B { --x: 50px; }
.C { --x: 100px; }
.D { --x: 150px; }
.E { --x: 200px; }
.F { --x: 250px; }
.G { --x: 300px; }
.H { --x: 350px; }
.I { --x: 400px; }
._0 { --y: 0px; }
._1 { --y: 50px; }
._2 { --y: 100px; }
._3 { --y: 150px; }
._4 { --y: 200px; }
._5 { --y: 250px; }
._6 { --y: 300px; }
._7 { --y: 350px; }
._8 { --y: 400px; }
use {
transform: translate(var(--x, 0px), var(--y, 0px));
}
</style>
<defs>
<circle id="white" cx="25" cy="25" r="20" fill="white" stroke="black"/>
<circle id="black" cx="25" cy="25" r="20" fill="black" stroke="white"/>
<line id="hline" x1="0" y1="0" x2="400" y2="0" stroke="black" stroke-width="1"/>
<line id="vline" x1="0" y1="0" x2="0" y2="400" stroke="black" stroke-width="1"/>
</defs>
<!-- Board background -->
<rect width="400" height="400" fill="green"/>
<!-- Horizontal lines -->
<use href="#hline" class="A _0"/>
<use href="#hline" class="A _1"/>
<use href="#hline" class="A _2"/>
<use href="#hline" class="A _3"/>
<use href="#hline" class="A _4"/>
<use href="#hline" class="A _5"/>
<use href="#hline" class="A _6"/>
<use href="#hline" class="A _7"/>
<use href="#hline" class="A _8"/>
<!-- Vertical lines -->
<use href="#vline" class="A _0"/>
<use href="#vline" class="B _0"/>
<use href="#vline" class="C _0"/>
<use href="#vline" class="D _0"/>
<use href="#vline" class="E _0"/>
<use href="#vline" class="F _0"/>
<use href="#vline" class="G _0"/>
<use href="#vline" class="H _0"/>
<use href="#vline" class="I _0"/>
<!-- Starting position -->
<use href="#white" class="D _3"/>
<use href="#black" class="E _3"/>
<use href="#black" class="D _4"/>
<use href="#white" class="E _4"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment