othello board

othello.svg

<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>