# Moyō 模様
Moyō 模様 (pattern) is a collection of patterns in CSS I use for my website. Most of them were created as the months passed and I tweaked them for my time tracker tool.
Moyo comes as a single SVG file containing all the patterns. If you are not familiar with SVG, an SVG file can use a <defs> tag to store graphical objects that you will use later. Each pattern is defined inside the <pattern> tag and each one has an id attribute. Those ids can then be used inside other SVGs.
How to use#
Copy paste the content of this file inside your template and use the desired pattern.
<svg height="100" width="100">
<rect style="fill: url(#checks);" height="100" width="100"></rect>
</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>).
Two patterns (seigaiha and yinyang) default to a white background, which can be changed by using a css custom property.
#seigaiha, #yinyang {
--background: red;
}