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

Initially published: December 12th, 2020
Generated: February 4th, 2022
Statistics for: Moyo Time spent
Time spent
10 hours total
Started
week 50 of 2020
Last update
week 9 of 2021
All times entries for this page
YearWeekHours
202196
2020504