index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
  <head>
    <style>
      svg {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <svg viewbox="-50 -50 3450 2450" xmlns="http://www.w3.org/2000/svg" stroke-width="20">
      <defs>
        <pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
          <rect x="0" y="0" width="1in" height="2in" fill="black" />
          <rect x="1in" y="0" width="1in" height="2in" fill="white" />
        </pattern>

        <pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
      </defs>
      
      <rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
      <line x1="0" y1="0" x2="34in" y2="0" stroke="url(#inch-mark)" />
      <line x1="0" y1="0" x2="0" y2="22in" stroke="url(#vert)" />
    </svg>
  </body>
</html>