examples/default-grid.svg

<svg width="200" height="200" viewBox="-30 -18 248 248" xmlns="http://www.w3.org/2000/svg" style="background: rgb(255, 255, 255); border-radius: 8px;">
    <defs>
      <pattern id="grid-1-#ccc-#fff-200-200-20-20" width="20" height="20" patternUnits="userSpaceOnUse">
        <path d="M 0 0 L 0 20 20 20 20 0 0 0" fill="#fff" stroke="#ccc" stroke-width="0.5"></path>
      </pattern>
    </defs>
    <rect width="200" height="200" fill="url(#grid-1-#ccc-#fff-200-200-20-20)" style="
    transform: scaleY(-1);
    transform-origin: 0 100px;
  "></rect>
  
    <defs>
      <marker id="h-14" markerWidth="10" markerHeight="5" refY="2.5" orient="auto">
        <polygon points="0 0, 10 2.5, 0 5" fill="#aaa"></polygon>
      </marker>
    </defs>
    <line x1="0" y1="200" x2="180" y2="200" stroke="#aaa" stroke-width="2" marker-end="url(#h-14)"></line>
    
    
  
    <defs>
      <marker id="h-15" markerWidth="10" markerHeight="5" refY="2.5" orient="auto">
        <polygon points="0 0, 10 2.5, 0 5" fill="#aaa"></polygon>
      </marker>
    </defs>
    <line x1="0" y1="200" x2="1.1021821192326179e-14" y2="20" stroke="#aaa" stroke-width="2" marker-end="url(#h-15)"></line>
    
    
  
    <text x="200" y="189" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 16px sans-serif">
      x
    </text>
  
    <text x="12" y="1" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 16px sans-serif">
      y
    </text>
  
    <line x1="0" y1="200" x2="0" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-8" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="0" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      0
    </text>
  
  
    <line x1="20" y1="200" x2="20" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="12" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="20" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      1
    </text>
  
  
    <line x1="40" y1="200" x2="40" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="32" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="40" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      2
    </text>
  
  
    <line x1="60" y1="200" x2="60" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="52" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="60" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      3
    </text>
  
  
    <line x1="80" y1="200" x2="80" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="72" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="80" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      4
    </text>
  
  
    <line x1="100" y1="200" x2="100" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="92" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="100" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      5
    </text>
  
  
    <line x1="120" y1="200" x2="120" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="112" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="120" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      6
    </text>
  
  
    <line x1="140" y1="200" x2="140" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="132" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="140" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      7
    </text>
  
  
    <line x1="160" y1="200" x2="160" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="152" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="160" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      8
    </text>
  
  
    <line x1="180" y1="200" x2="180" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="172" y="205.6" width="16" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="180" y="215" width="16" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      9
    </text>
  
  
    <line x1="0" y1="200" x2="-5" y2="200" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="191.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="201" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      0
    </text>
  
  
    <line x1="0" y1="180" x2="-5" y2="180" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="171.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="181" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      1
    </text>
  
  
    <line x1="0" y1="160" x2="-5" y2="160" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="151.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="161" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      2
    </text>
  
  
    <line x1="0" y1="140" x2="-5" y2="140" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="131.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="141" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      3
    </text>
  
  
    <line x1="0" y1="120" x2="-5" y2="120" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="111.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="121" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      4
    </text>
  
  
    <line x1="0" y1="100" x2="-5" y2="100" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="91.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="101" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      5
    </text>
  
  
    <line x1="0" y1="80" x2="-5" y2="80" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="71.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="81" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      6
    </text>
  
  
    <line x1="0" y1="60" x2="-5" y2="60" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="51.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="61" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      7
    </text>
  
  
    <line x1="0" y1="40" x2="-5" y2="40" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="31.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="41" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      8
    </text>
  
  
    <line x1="0" y1="20" x2="-5" y2="20" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="11.6" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="21" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      9
    </text>
  
  
    <circle cx="0" cy="200" r="4" fill="#000"></circle>
    
    <rect x="-20" y="169.5" width="40" height="21" fill="#fffd" stroke="#000" stroke-width="1.75" rx="5"></rect>
    
    <text x="0" y="181" width="40" fill="#000" style="dominant-baseline: middle; text-anchor: middle; font: normal 16px sans-serif">
      0,0
    </text>
  
  
    
  </svg>