add grid pattern

pull/32/head
remrem 2 years ago
parent e630f7d040
commit 2ab54c6b0a

@ -40,6 +40,16 @@
<rect width="2" height="8" fill="#fff" /> <rect width="2" height="8" fill="#fff" />
</pattern> </pattern>
<pattern
id="pattern-grid"
width="30"
height="30"
patternUnits="userSpaceOnUse"
>
<rect width="7.5" height="30" fill="#fff" />
<rect width="30" height="7.5" fill="#fff" />
</pattern>
<pattern <pattern
id="pattern-dot" id="pattern-dot"
width="40" width="40"
@ -68,6 +78,16 @@
fill="url(#pattern-dot)" fill="url(#pattern-dot)"
/> />
</mask> </mask>
<mask id="mask-grid">
<rect
x="0"
y="0"
width="200"
height="400"
fill="url(#pattern-grid)"
/>
</mask>
</defs> </defs>
</svg> </svg>
@ -84,7 +104,7 @@
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use> <use href="#squiggle" fill="#008002" mask="url(#mask-grid)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use> <use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg> </svg>
</div> </div>

Loading…
Cancel
Save