Inch tick marks SVG pattern

This commit is contained in:
Catalin Mititiuc 2024-03-14 13:15:36 -07:00
commit 28833cf2bc

25
index.html Normal file
View File

@ -0,0 +1,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>