examples/small-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-0.2-#ccc-#fff-200-200-200-200" width="40" height="40" patternUnits="userSpaceOnUse">
        <path d="M 0 0 L 0 40 40 40 40 0 0 0" fill="#fff" stroke="#ccc" stroke-width="0.5"></path>
      </pattern>
    </defs>
    <rect width="200" height="200" fill="url(#grid-0.2-#ccc-#fff-200-200-200-200)" style="
    transform: scaleY(-1);
    transform-origin: 0 100px;
  "></rect>
  
    <defs>
      <marker id="h-20" 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-20)"></line>
    
    
  
    <defs>
      <marker id="h-21" 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-21)"></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="-16" y="205.6" width="32" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="0" y="215" width="32" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      0.0
    </text>
  
  
    <line x1="40" y1="200" x2="40" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="24" y="205.6" width="32" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="40" y="215" width="32" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      0.2
    </text>
  
  
    <line x1="80" y1="200" x2="80" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="64" y="205.6" width="32" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="80" y="215" width="32" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      0.4
    </text>
  
  
    <line x1="120.00000000000001" y1="200" x2="120.00000000000001" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="104.00000000000001" y="205.6" width="32" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="120.00000000000001" y="215" width="32" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      0.6
    </text>
  
  
    <line x1="160" y1="200" x2="160" y2="205" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="144" y="205.6" width="32" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="160" y="215" width="32" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      0.8
    </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.0
    </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">
      0.2
    </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">
      0.4
    </text>
  
  
    <line x1="0" y1="79.99999999999999" x2="-5" y2="79.99999999999999" stroke="#aaa" stroke-width="1.5" stroke-dasharray="undefined"></line>
    
  
    <rect x="-22" y="71.59999999999998" width="20" height="16.8" fill="#fffd" stroke="#aaa" stroke-width="0" rx="5"></rect>
    
    <text x="-12" y="80.99999999999999" width="20" fill="#aaa" style="dominant-baseline: middle; text-anchor: middle; font: normal 12px sans-serif">
      0.6
    </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">
      0.8
    </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>