Thomasorus wiki

Moyō 模様

Moyō 模様 (pattern) is a collection of patterns in CSS I use for my websites. Most of them were created as the months passed and I tweaked them for my time tracker tool.

About the currentColor keyword

You will often see the currentColor value used in SVG patterns. currentColor is a not very known keyword that acts as a variable. It takes the color value of the current element and if it doesn't exist, the parent element.

It's important if you use themes for your website. For example on this website, I use two variables for the light and dark themes and the prefers-color-scheme mediaquery to activate the theme based on the user operating system preference.

By default text is black and background is white:

:root {
 --text: black;
 --background: white;
}

And the opposite for dark theme:

@media (prefers-color-scheme: dark) {
:root {
 --text: white;
 --background: black;
}
}

So in the first case, currentColor will be white and in the second case it will be black.

Using currentColor instead of directly reusing the var(--myValue) syntax allows the SVG patterns to be portable and agnostic. It's the same for the transparent keyword, as it allows a part of the pattern to use the color used in the background.

Demo using SVG

#checks
#checks-diagonal
#grid
#grid-medium
#cross-dots
#vertical-lines
#horizontal-lines
#diagonal-lines-left
#diagonal-lines-right
#vertical-stripes
#horizontal-stripes
#diagonal-stripes-left
#diagonal-stripes-right
#double-diagonal-stripes
#zig-zag
#zig-zag-3d
#triangles
#quarter-circles
#seigaiha
#wave
#yinyang
#circles-small
#circles-medium
#circles-large
#stars
#squares
#paper
#cubes

CSS Demo

Due to their base64 encoding, these patterns cannot change colors.

.moyo-checks
.moyo-checks-diagonal
.moyo-grid
.moyo-grid-medium
.moyo-cross-dots
.moyo-vertical-lines
.moyo-horizontal-lines
.moyo-diagonal-lines-left
.moyo-diagonal-lines-right
.moyo-vertical-stripes
.moyo-horizontal-stripes
.moyo-diagonal-stripes-left
.moyo-diagonal-stripes-right
.moyo-double-diagonal-stripes
.moyo-zig-zag
.moyo-zig-zag-3d
.moyo-triangles
.moyo-quarter-circles
.moyo-seigaiha
.moyo-wave
.moyo-yinyang
.moyo-circles-small
.moyo-circles-medium
.moyo-circles-large
.moyo-stars
.moyo-squares
.moyo-paper
.moyo-cubes