SVG patterns for a dash and cross symbols - html

Question

I'm trying to achieve the following graph using SVG patterns:
The only one I could do is the first one:
.patterns { display: flex;}
<div style="position: absolute; width: 0; height: 0;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="pattern1" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" style="stroke:#04A484; stroke-width:1" />
</pattern>
<pattern id="pattern2" patternUnits="userSpaceOnUse">
</pattern>
<pattern id="pattern3" patternUnits="userSpaceOnUse">
</pattern>
</defs>
</svg>
</div>
<div class="patterns">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<rect width="25px" height="100px" fill="url(#pattern1)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<rect width="25px" height="100px" fill="url(#pattern2)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<rect width="25px" height="100px" fill="url(#pattern3)"/>
</svg>
</div>
Borders are not an issue, since I'm using a charts library that only needs the SVG pattern.
How can I achieve the other two patterns ?
Thanks in advance.

Answer 1

There's a slight problem with your diagonal shading. Since the line is dawn from (0,0) to (0,10), it lies on the edge of the SVG rendering area, so half of it will be hidden. That's why your lines look rather thin. You can fix that by offsetting the line slightly so that you keep everything visible.
The other patterns aren't hard to make. There's no need to apply any sort of rotation; just find a unit pattern that repeats the way you want. For the second of the three patterns, one of the horizontal lines has to travel across the edge of the pattern unit. To fix this, I broke this line into two parts; one aligned with the left edge of the pattern block, and one aligned with the right edge; i.e. M15 4 20 4M0 4 5 4 instead of M15 4 25 4, which would end up 5 pixels past the right edge of the 20×32 pattern block.
(Note: I'm using <path> elements to draw the lines, because they're a bit easier to type in. <path d="M1 2 3 4M5 6 7 8"/> is equivalent to <line x1="1" y1="2" x2="3" y2="4"/><line x1="5" y1="6" x2="7" y2="8"/>.)
.patterns { display: flex;}
<div style="position: absolute; width: 0; height: 0;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="pattern1" width="8" height="8" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
<path d="M3 0 3 8" style="stroke:#25a08b; stroke-width:2" />
</pattern>
<pattern id="pattern2" width="20" height="32" patternUnits="userSpaceOnUse">
<path d="M0 28 10 28M5 20 15 20M10 12 20 12M15 4 20 4M0 4 5 4" style="stroke:#b2b6c1; stroke-width:2" />
</pattern>
<pattern id="pattern3" width="20" height="32" patternUnits="userSpaceOnUse">
<path d="M1 8 9 8M5 4 5 12M11 24 19 24M15 20 15 28" style="stroke:#0c2160; stroke-width:2" />
</pattern>
</defs>
</svg>
</div>
<div class="patterns">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<rect x="1" y="1" width="28" height="98" fill="url(#pattern1)" stroke="#25a08b" stroke-width="2"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<rect x="1" y="1" width="28" height="98" fill="url(#pattern2)" stroke="#b2b6c1" stroke-width="2"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<rect x="1" y="1" width="28" height="98" fill="url(#pattern3)" stroke="#0c2160" stroke-width="2"/>
</svg>
</div>