Compare commits
3 changed files with 192 additions and 186 deletions
13
README.md
13
README.md
|
|
@ -24,20 +24,13 @@ For example this SVG will be be a rectangle (`<rect>` tag) of 100 pixels width a
|
||||||
</svg>
|
</svg>
|
||||||
```
|
```
|
||||||
|
|
||||||
Colors are automatically defined by two CSS rules: the color value of the text (aka currentColor) and the background value on the div containing them (if none, the <body>).
|
Almost all SVG patterns come with no colors defined, which means colors will be automatically defined by two CSS rules: the `color` value and the `background` value on your `<body>` element.
|
||||||
|
|
||||||
Two patterns (seigaiha and yinyang) default to a white background, which can be changed by using a css custom property.
|
|
||||||
|
|
||||||
```css
|
|
||||||
#seigaiha, #yinyang {
|
|
||||||
--background: red;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
If you change those colors (for themes or dark mode), the patterns colors will change too accordingly.
|
||||||
|
|
||||||
## CSS Version
|
## CSS Version
|
||||||
|
|
||||||
The CSS version is deprecated, and uses the SVGs as base64 background images. Include the classname to your existing html element and the pattern should appear. Please note that since this is a base64 encoding, you cannot change the colors when using the CSS version.
|
The CSS version uses the SVGs as base64 background images. Just include the classname to your existing html element and the pattern should appear. Please note that since this is a base64 encoding, you cannot change the colors when using the CSS version.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|
|
||||||
363
dist/moyo.svg
vendored
363
dist/moyo.svg
vendored
|
|
@ -1,175 +1,188 @@
|
||||||
<svg aria-hidden="true" style="clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;">
|
<svg aria-hidden="true" style="clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;">
|
||||||
<defs>
|
<defs>
|
||||||
<pattern id="checks" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="checks" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<rect x="0" y="0" width="5" height="5" fill="currentColor"/>
|
<rect x="0" y="0" width="5" height="5" fill="currentColor" />
|
||||||
<rect x="5" y="5" width="5" height="5" fill="currentColor"/>
|
<rect x="5" y="5" width="5" height="5" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="checks-diagonal" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="checks-diagonal" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<polygon points="5,0 10,5 5,10 0,5" fill="currentColor"/>
|
<polygon x="0" y="0" points="5,0 10,5 5,10 0,5" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="grid" patternUnits="userSpaceOnUse" width="4" height="4">
|
<pattern id="grid" patternUnits="userSpaceOnUse" width="4" height="4">
|
||||||
<rect x="0" y="2" width="4" height="1" fill="currentColor"/>
|
<rect x="0" y="2" width="4" height="1" fill="currentColor" />
|
||||||
<rect x="2" y="0" width="1" height="4" fill="currentColor"/>
|
<rect x="2" y="0" width="1" height="4" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="grid-medium" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="grid-medium" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<rect x="0" y="5" width="10" height="1" fill="currentColor"/>
|
<rect x="0" y="5" width="10" height="1" fill="currentColor" />
|
||||||
<rect x="5" y="0" width="1" height="10" fill="currentColor"/>
|
<rect x="5" y="0" width="1" height="10" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="cross-dots" patternUnits="userSpaceOnUse" width="4" height="4">
|
<pattern id="cross-dots" patternUnits="userSpaceOnUse" width="4" height="4">
|
||||||
<rect x="0" y="0" width="2" height="2" fill="currentColor"/>
|
<rect x="0" y="0" width="2" height="2" fill="currentColor" />
|
||||||
<rect x="2" y="2" width="2" height="2" fill="currentColor"/>
|
<rect x="2" y="2" width="2" height="2" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="vertical-lines" patternUnits="userSpaceOnUse" width="4" height="4">
|
<pattern id="vertical-lines" patternUnits="userSpaceOnUse" width="4" height="4">
|
||||||
<rect x="2" y="0" width="1" height="4" fill="currentColor"/>
|
<rect x="2" y="0" width="1" height="4" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="horizontal-lines" patternUnits="userSpaceOnUse" width="4" height="4">
|
<pattern id="horizontal-lines" patternUnits="userSpaceOnUse" width="4" height="4">
|
||||||
<rect x="0" y="2" width="4" height="1" fill="currentColor"/>
|
<rect x="0" y="2" width="4" height="1" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="diagonal-lines-left" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="diagonal-lines-left" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<rect width="10" height="10" fill="none"/>
|
<rect width="10" height="10" fill="none" />
|
||||||
<path d="M1,11 l-2,-2 M-1,4 l7,7 M-1,-1 l12,12 M4,-1 l12,12 M9,-1 l3,3" stroke="currentColor" stroke-width="1"/>
|
<path d="M1,11 l-2,-2 M-1,4 l7,7 M-1,-1 l12,12 M4,-1 l12,12 M9,-1 l3,3" stroke="currentColor" stroke-width="1" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="diagonal-lines-right" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="diagonal-lines-right" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<rect width="10" height="10" fill="none"/>
|
<rect width="10" height="10" fill="none" />
|
||||||
<path d="M-1,1 l2,-2 M-1,6 l7,-7 M0,10 l11,-11 M4,11 l8,-8 M9,11 l2,-2" stroke="currentColor" stroke-width="1"/>
|
<path d="M-1,1 l2,-2 M-1,6 l7,-7 M0,10 l11,-11 M4,11 l8,-8 M9,11 l2,-2" stroke="currentColor" stroke-width="1" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="vertical-stripes" patternUnits="userSpaceOnUse" width="8" height="8">
|
<pattern id="vertical-stripes" patternUnits="userSpaceOnUse" width="8" height="8">
|
||||||
<rect x="4" y="0" width="4" height="8" fill="currentColor"/>
|
<rect x="4" y="0" width="4" height="8" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="horizontal-stripes" patternUnits="userSpaceOnUse" width="8" height="8">
|
<pattern id="horizontal-stripes" patternUnits="userSpaceOnUse" width="8" height="8">
|
||||||
<rect x="0" y="4" width="8" height="4" fill="currentColor"/>
|
<rect x="0" y="4" width="8" height="4" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="diagonal-stripes-left" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="diagonal-stripes-left" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<rect width="10" height="10" fill="none"/>
|
<rect width="10" height="10" fill="none" />
|
||||||
<path d="M1,11 l-2,-2 M-1,-1 l12,12 M9,-1 l3,3" stroke="currentColor" stroke-width="3"/>
|
<path d="M1,11 l-2,-2 M-1,-1 l12,12 M9,-1 l3,3" stroke="currentColor" stroke-width="3" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="diagonal-stripes-right" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="diagonal-stripes-right" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<rect width="10" height="10" fill="none"/>
|
<rect width="10" height="10" fill="none" />
|
||||||
<path d="M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2" stroke="currentColor" stroke-width="3"/>
|
<path d="M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2" stroke="currentColor" stroke-width="3" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="double-diagonal-stripes" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="double-diagonal-stripes" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<rect width="10" height="10" fill="none"/>
|
<rect width="10" height="10" fill="none" />
|
||||||
<path d="M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2" stroke="currentColor" opacity="0.5" stroke-width="3"/>
|
<path d="M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2" stroke="currentColor" opacity="0.5" stroke-width="3" />
|
||||||
<path d="M1,11 l-2,-2 M-1,-1 l12,12 M9,-1 l3,3" stroke="currentColor" stroke-width="3"/>
|
<path d="M1,11 l-2,-2 M-1,-1 l12,12 M9,-1 l3,3" stroke="currentColor" stroke-width="3" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="zig-zag" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="zig-zag" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<polygon points="0,0 10,0 5,5" fill="currentColor"/>
|
<polygon points="0,0 10,0 5,5" fill="currentColor" />
|
||||||
<polygon points="0,5 5,10 0,10" fill="currentColor"/>
|
<polygon points="0,5 5,10 0,10" fill="currentColor" />
|
||||||
<polygon points="10,5 5,10 10,10" fill="currentColor"/>
|
<polygon points="10,5 5,10 10,10" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="zig-zag-3d" patternUnits="userSpaceOnUse" width="16" height="16">
|
<pattern id="zig-zag-3d" patternUnits="userSpaceOnUse" width="16" height="16">
|
||||||
<rect x="8" y="0" width="8" height="16" fill="currentColor" opacity="0.5"/>
|
<rect x="8" y="0" width="8" height="16" fill="currentColor" opacity="0.5" />
|
||||||
<polygon points="0,0 16,0 8,8" fill="currentColor"/>
|
<polygon points="0,0 16,0 8,8" fill="currentColor" />
|
||||||
<polygon points="0,8 8,16 0,16" fill="currentColor"/>
|
<polygon points="0,8 8,16 0,16" fill="currentColor" />
|
||||||
<polygon points="16,8 8,16 16,16" fill="currentColor"/>
|
<polygon points="16,8 8,16 16,16" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="triangles" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="triangles" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<polygon points="0,0 10,10 0,10" fill="currentColor"/>
|
<polygon x="-1" points="0,0 10,10 0,10" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="quarter-circles" patternUnits="userSpaceOnUse" width="10" height="10">
|
<pattern id="quarter-circles" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<circle cx="11" cy="11" r="10" fill="currentColor"/>
|
<circle cx="11" cy="11" r="10" fill="currentColor" />
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="seigaiha" patternUnits="userSpaceOnUse" width="48" height="20">
|
<pattern id="seigaiha" patternUnits="userSpaceOnUse" width="48" height="20">
|
||||||
<circle cx="-4" cy="10" stroke-width="2" r="20" fill="var(--background, white)" stroke="currentColor"/>
|
|
||||||
<circle cx="-4" cy="10" stroke-width="2" r="16" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="10" stroke-width="2" r="20" fill="white" stroke="black" />
|
||||||
<circle cx="-4" cy="10" stroke-width="2" r="12" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="10" stroke-width="2" r="16" fill="white" stroke="black" />
|
||||||
<circle cx="-4" cy="10" stroke-width="2" r="8" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="10" stroke-width="2" r="12" fill="white" stroke="black" />
|
||||||
<circle cx="-4" cy="10" stroke-width="2" r="4" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="10" stroke-width="2" r="8" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="10" stroke-width="2" r="20" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="10" stroke-width="2" r="4" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="10" stroke-width="2" r="16" fill="var(--background, white)" stroke="currentColor"/>
|
|
||||||
<circle cx="44" cy="10" stroke-width="2" r="12" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="10" stroke-width="2" r="20" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="10" stroke-width="2" r="8" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="10" stroke-width="2" r="16" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="10" stroke-width="2" r="4" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="10" stroke-width="2" r="12" fill="white" stroke="black" />
|
||||||
<circle cx="20" cy="20" stroke-width="2" r="20" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="10" stroke-width="2" r="8" fill="white" stroke="black" />
|
||||||
<circle cx="20" cy="20" stroke-width="2" r="16" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="10" stroke-width="2" r="4" fill="white" stroke="black" />
|
||||||
<circle cx="20" cy="20" stroke-width="2" r="12" fill="var(--background, white)" stroke="currentColor"/>
|
|
||||||
<circle cx="20" cy="20" stroke-width="2" r="8" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="20" cy="20" stroke-width="2" r="20" fill="white" stroke="black" />
|
||||||
<circle cx="20" cy="20" stroke-width="2" r="4" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="20" cy="20" stroke-width="2" r="16" fill="white" stroke="black" />
|
||||||
<circle cx="-4" cy="30" stroke-width="2" r="20" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="20" cy="20" stroke-width="2" r="12" fill="white" stroke="black" />
|
||||||
<circle cx="-4" cy="30" stroke-width="2" r="16" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="20" cy="20" stroke-width="2" r="8" fill="white" stroke="black" />
|
||||||
<circle cx="-4" cy="30" stroke-width="2" r="12" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="20" cy="20" stroke-width="2" r="4" fill="white" stroke="black" />
|
||||||
<circle cx="-4" cy="30" stroke-width="2" r="8" fill="var(--background, white)" stroke="currentColor"/>
|
|
||||||
<circle cx="-4" cy="30" stroke-width="2" r="4" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="30" stroke-width="2" r="20" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="30" stroke-width="2" r="20" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="30" stroke-width="2" r="16" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="30" stroke-width="2" r="16" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="30" stroke-width="2" r="12" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="30" stroke-width="2" r="12" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="30" stroke-width="2" r="8" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="30" stroke-width="2" r="8" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="-4" cy="30" stroke-width="2" r="4" fill="white" stroke="black" />
|
||||||
<circle cx="44" cy="30" stroke-width="2" r="4" fill="var(--background, white)" stroke="currentColor"/>
|
|
||||||
<circle cx="20" cy="40" stroke-width="2" r="20" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="30" stroke-width="2" r="20" fill="white" stroke="black" />
|
||||||
<circle cx="20" cy="40" stroke-width="2" r="16" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="30" stroke-width="2" r="16" fill="white" stroke="black" />
|
||||||
<circle cx="20" cy="40" stroke-width="2" r="12" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="30" stroke-width="2" r="12" fill="white" stroke="black" />
|
||||||
<circle cx="20" cy="40" stroke-width="2" r="8" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="30" stroke-width="2" r="8" fill="white" stroke="black" />
|
||||||
<circle cx="20" cy="40" stroke-width="2" r="4" fill="var(--background, white)" stroke="currentColor"/>
|
<circle cx="44" cy="30" stroke-width="2" r="4" fill="white" stroke="black" />
|
||||||
</pattern>
|
|
||||||
<pattern id="wave" patternUnits="userSpaceOnUse" width="18" height="18">
|
<circle cx="20" cy="40" stroke-width="2" r="20" fill="white" stroke="black" />
|
||||||
<path fill="none" stroke="currentColor" d="M0,18 C 5,15 5,2 10,5 S 14,18 18,18"/>
|
<circle cx="20" cy="40" stroke-width="2" r="16" fill="white" stroke="black" />
|
||||||
</pattern>
|
<circle cx="20" cy="40" stroke-width="2" r="12" fill="white" stroke="black" />
|
||||||
<pattern id="yinyang" patternUnits="userSpaceOnUse" width="20" height="20">
|
<circle cx="20" cy="40" stroke-width="2" r="8" fill="white" stroke="black" />
|
||||||
<clipPath id="cut-off-left1">
|
<circle cx="20" cy="40" stroke-width="2" r="4" fill="white" stroke="black" />
|
||||||
<rect x="0" y="0" width="5" height="10"/>
|
</pattern>
|
||||||
</clipPath>
|
<pattern id="wave" patternUnits="userSpaceOnUse" width="18" height="18">
|
||||||
<clipPath id="cut-off-right1">
|
<path fill="none" stroke="currentColor" d="M0,18 C 5,15 5,2 10,5 S 14,18 18,18" />
|
||||||
<rect x="5" y="0" width="5" height="10"/>
|
</pattern>
|
||||||
</clipPath>
|
<pattern id="yinyang" patternUnits="userSpaceOnUse" width="20" height="20" bacl>
|
||||||
<rect width="20" height="20" fill="currentColor" opacity="0.5"/>
|
<clipPath id="cut-off-left1">
|
||||||
<circle cx="5" cy="5" r="5" fill="var(--background, white)" stroke="none" clip-path="url(#cut-off-left1)"/>
|
<rect x="0" y="0" width="5" height="10" />
|
||||||
<circle cx="5" cy="5" r="5" fill="currentColor" stroke="none" clip-path="url(#cut-off-right1)"/>
|
</clipPath>
|
||||||
<circle cx="5" cy="2.5" r="2.5" fill="var(--background, white)" stroke="none"/>
|
<clipPath id="cut-off-right1">
|
||||||
<circle cx="5" cy="7.5" r="2.5" fill="currentColor" stroke="none"/>
|
<rect x="5" y="0" width="5" height="10" />
|
||||||
<circle cx="5" cy="2.5" r="1" fill="currentColor" stroke="none"/>
|
</clipPath>
|
||||||
<circle cx="5" cy="7.5" r="1" fill="var(--background, white)" stroke="none"/>
|
<rect width="20" height="20" fill="currentColor" opacity="0.5" />
|
||||||
<clipPath id="cut-off-left2">
|
<circle cx="5" cy="5" r="5" fill="white" stroke="none" clip-path="url(#cut-off-left1)" />
|
||||||
<rect x="10" y="10" width="5" height="10"/>
|
<circle cx="5" cy="5" r="5" fill="black" stroke="none" clip-path="url(#cut-off-right1)" />
|
||||||
</clipPath>
|
<circle cx="5" cy="2.5" r="2.5" fill="white" stroke="none" />
|
||||||
<clipPath id="cut-off-right2">
|
<circle cx="5" cy="7.5" r="2.5" fill="black" stroke="none" />
|
||||||
<rect x="15" y="10" width="5" height="10"/>
|
<circle cx="5" cy="2.5" r="1" fill="black" stroke="none" />
|
||||||
</clipPath>
|
<circle cx="5" cy="7.5" r="1" fill="white" stroke="none" />
|
||||||
<circle cx="15" cy="15" r="5" fill="var(--background, white)" stroke="none" clip-path="url(#cut-off-left2)"/>
|
|
||||||
<circle cx="15" cy="15" r="5" fill="currentColor" stroke="none" clip-path="url(#cut-off-right2)"/>
|
<clipPath id="cut-off-left2">
|
||||||
<circle cx="15" cy="12.5" r="2.5" fill="var(--background, white)" stroke="none"/>
|
<rect x="10" y="10" width="5" height="10" />
|
||||||
<circle cx="15" cy="17.5" r="2.5" fill="currentColor" stroke="none"/>
|
</clipPath>
|
||||||
<circle cx="15" cy="12.5" r="1" fill="currentColor" stroke="none"/>
|
<clipPath id="cut-off-right2">
|
||||||
<circle cx="15" cy="17.5" r="1" fill="var(--background, white)" stroke="none"/>
|
<rect x="15" y="10" width="5" height="10" />
|
||||||
</pattern>
|
</clipPath>
|
||||||
<pattern id="circles-small" patternUnits="userSpaceOnUse" width="10" height="10">
|
|
||||||
<circle cx="5" cy="5" r="1" fill="currentColor" stroke="currentColor"/>
|
<circle cx="15" cy="15" r="5" fill="white" stroke="none" clip-path="url(#cut-off-left2)" />
|
||||||
</pattern>
|
<circle cx="15" cy="15" r="5" fill="black" stroke="none" clip-path="url(#cut-off-right2)" />
|
||||||
<pattern id="circles-medium" patternUnits="userSpaceOnUse" width="10" height="10">
|
<circle cx="15" cy="12.5" r="2.5" fill="white" stroke="none" />
|
||||||
<circle cx="5" cy="5" r="3" fill="none" stroke="currentColor"/>
|
<circle cx="15" cy="17.5" r="2.5" fill="black" stroke="none" />
|
||||||
</pattern>
|
<circle cx="15" cy="12.5" r="1" fill="black" stroke="none" />
|
||||||
<pattern id="circles-large" patternUnits="userSpaceOnUse" width="10" height="10">
|
<circle cx="15" cy="17.5" r="1" fill="white" stroke="none" />
|
||||||
<circle cx="5" cy="5" r="4.5" fill="none" stroke="currentColor"/>
|
</pattern>
|
||||||
</pattern>
|
<pattern id="circles-small" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<pattern id="stars" patternUnits="userSpaceOnUse" width="20" height="20">
|
<circle cx="5" cy="5" r="1" fill="currentColor" stroke="currentColor" />
|
||||||
<rect x="2.5" y="5" width="6" height="1" fill="currentColor"/>
|
</pattern>
|
||||||
<rect x="5" y="2.5" width="1" height="6" fill="currentColor"/>
|
<pattern id="circles-medium" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<rect x="12.5" y="15" width="6" height="1" fill="currentColor"/>
|
<circle cx="5" cy="5" r="3" fill="none" stroke="currentColor" />
|
||||||
<rect x="15" y="12.5" width="1" height="6" fill="currentColor"/>
|
</pattern>
|
||||||
</pattern>
|
<pattern id="circles-large" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||||
<pattern id="squares" patternUnits="userSpaceOnUse" width="20" height="20">
|
<circle cx="5" cy="5" r="4.5" fill="none" stroke="currentColor" />
|
||||||
<rect x="0" y="0" width="20" height="1" fill="currentColor"/>
|
|
||||||
<rect x="0" y="0" width="1" height="20" fill="currentColor"/>
|
</pattern>
|
||||||
<rect x="0" y="12" width="20" height="1" fill="currentColor" opacity="0.5"/>
|
<pattern id="stars" patternUnits="userSpaceOnUse" width="20" height="20">
|
||||||
<rect x="11" y="0" width="1" height="20" fill="currentColor" opacity="0.5"/>
|
<rect x="2.5" y="5" width="6" height="1" fill="currentColor" />
|
||||||
</pattern>
|
<rect x="5" y="2.5" width="1" height="6" fill="currentColor" />
|
||||||
<pattern id="paper" patternUnits="userSpaceOnUse" width="20" height="20">
|
<rect x="12.5" y="15" width="6" height="1" fill="currentColor" />
|
||||||
<rect x="0" y="0" width="20" height="1.5" fill="currentColor"/>
|
<rect x="15" y="12.5" width="1" height="6" fill="currentColor" />
|
||||||
<rect x="0" y="0" width="1.5" height="20" fill="currentColor"/>
|
</pattern>
|
||||||
<rect x="0" y="4" width="20" height="1" fill="currentColor" opacity="0.5"/>
|
<pattern id="squares" patternUnits="userSpaceOnUse" width="20" height="20">
|
||||||
<rect x="4" y="0" width="1" height="20" fill="currentColor" opacity="0.5"/>
|
<rect x="0" y="0" width="20" height="1" fill="currentColor" />
|
||||||
<rect x="0" y="8" width="20" height="1" fill="currentColor" opacity="0.5"/>
|
<rect x="0" y="0" width="1" height="20" fill="currentColor" />
|
||||||
<rect x="8" y="0" width="1" height="20" fill="currentColor" opacity="0.5"/>
|
<rect x="0" y="12" width="20" height="1" fill="currentColor" opacity="0.5" />
|
||||||
<rect x="0" y="12" width="20" height="1" fill="currentColor" opacity="0.5"/>
|
<rect x="11" y="0" width="1" height="20" fill="currentColor" opacity="0.5" />
|
||||||
<rect x="12" y="0" width="1" height="20" fill="currentColor" opacity="0.5"/>
|
</pattern>
|
||||||
<rect x="0" y="16" width="20" height="1" fill="currentColor" opacity="0.5"/>
|
<pattern id="paper" patternUnits="userSpaceOnUse" width="20" height="20">
|
||||||
<rect x="16" y="0" width="1" height="20" fill="currentColor" opacity="0.5"/>
|
<rect x="0" y="0" width="20" height="1.5" fill="currentColor" />
|
||||||
</pattern>
|
<rect x="0" y="0" width="1.5" height="20" fill="currentColor" />
|
||||||
<pattern id="cubes" patternUnits="userSpaceOnUse" width="14" height="26">
|
|
||||||
<rect x="0" y="0" width="14" height="26" fill="none"/>
|
<rect x="0" y="4" width="20" height="1" fill="currentColor" opacity="0.5" />
|
||||||
<path d="M0,5 l7,-5 l0,8 l-7,5" stroke="none" fill="currentColor"/>
|
<rect x="4" y="0" width="1" height="20" fill="currentColor" opacity="0.5" />
|
||||||
<path d="M0,13 l7,5 l0,8 l-7,-5" stroke="none" fill="currentColor" opacity="0.5"/>
|
|
||||||
<path d="M7,18 l7,-5 l0,8 l-7,5" stroke="none" fill="currentColor"/>
|
<rect x="0" y="8" width="20" height="1" fill="currentColor" opacity="0.5" />
|
||||||
<path d="M7,0 l7,5 l0,8 l-7,-5" stroke="none" fill="currentColor" opacity="0.5"/>
|
<rect x="8" y="0" width="1" height="20" fill="currentColor" opacity="0.5" />
|
||||||
</pattern>
|
|
||||||
</defs>
|
<rect x="0" y="12" width="20" height="1" fill="currentColor" opacity="0.5" />
|
||||||
</svg>
|
<rect x="12" y="0" width="1" height="20" fill="currentColor" opacity="0.5" />
|
||||||
|
|
||||||
|
<rect x="0" y="16" width="20" height="1" fill="currentColor" opacity="0.5" />
|
||||||
|
<rect x="16" y="0" width="1" height="20" fill="currentColor" opacity="0.5" />
|
||||||
|
</pattern>
|
||||||
|
<pattern id="cubes" patternUnits="userSpaceOnUse" width="14" height="26">
|
||||||
|
<rect x="0" y="0" width="14" height="26" fill="none" />
|
||||||
|
<path d="M0,5 l7,-5 l0,8 l-7,5" stroke="none" fill="currentColor" />
|
||||||
|
<path d="M0,13 l7,5 l0,8 l-7,-5" stroke="none" fill="currentColor" opacity="0.5" />
|
||||||
|
<path d="M7,18 l7,-5 l0,8 l-7,5" stroke="none" fill="currentColor" />
|
||||||
|
<path d="M7,0 l7,5 l0,8 l-7,-5" stroke="none" fill="currentColor" opacity="0.5" />
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 10 KiB |
2
moyo.mjs
2
moyo.mjs
|
|
@ -131,7 +131,7 @@ const patterns = [
|
||||||
<path fill="none" stroke="currentColor" d="M0,18 C 5,15 5,2 10,5 S 14,18 18,18" />
|
<path fill="none" stroke="currentColor" d="M0,18 C 5,15 5,2 10,5 S 14,18 18,18" />
|
||||||
</pattern>`,
|
</pattern>`,
|
||||||
|
|
||||||
`<pattern id="yinyang" patternUnits="userSpaceOnUse" width="20" height="20">
|
`<pattern id="yinyang" patternUnits="userSpaceOnUse" width="20" height="20" bacl>
|
||||||
<clipPath id="cut-off-left1">
|
<clipPath id="cut-off-left1">
|
||||||
<rect x="0" y="0" width="5" height="10" />
|
<rect x="0" y="0" width="5" height="10" />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue