Thomasorus wiki

Moyō 模様

Moyō 模様 (pattern) is a collection of patterns in CSS I use for my websites. Most of them were gathered on the web 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 the 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 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.

Patterns

Checks

.pattern-checks {
background-image: linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(-45deg, white 25%, transparent 25%), linear-gradient(45deg, transparent 75%, white 75%), linear-gradient(-45deg, black 75%, white 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

Checks diagonal

.pattern-checks-diagonal {
background-color: transparent;
background-image: linear-gradient(45deg, currentcolor 25%, transparent 25%, transparent 75%, currentcolor 75%, currentcolor), linear-gradient(-45deg, currentcolor 25%, transparent 25%, transparent 75%, currentcolor 75%, currentcolor);
background-size:11px 11px;
}

Grid

.pattern-grid {
background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
background-size: 4px 4px;
}

Grid Medium

.pattern-grid--medium {
background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
background-size: 4px 4px;
}

Cross Dots

.pattern-dots {
background-image: radial-gradient(currentColor 1px, transparent 1px), radial-gradient(currentColor 1px, transparent 1px);
background-size: calc(4 * 1px) calc(4 * 1px);
background-position: 0 0, calc(2 * 1px) calc(2 * 1px)
}

Vertical lines

.pattern-vertical-lines {
background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
background-size: 4px 4px
}

Horizontal lines

.pattern-horizontal-lines {
background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
background-size: 4px 4px
}

Diagonal lines left

.pattern-diagonal-lines--left {
background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
background-size: 6px 6px
}

Diagonal lines right

.pattern-diagonal-lines--right {
background-image: repeating-linear-gradient(-45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
background-size: 6px 6px
}

Vertical stripes

.pattern-vertical-stripes {
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
background-size: 6px 6px;
}

Horizontal stripes

.pattern-horizontal-stripes {
background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
background-size: 6px 6px
}

Diagonal stripes left

.pattern-diagonal-stripes--left {
background: repeating-linear-gradient(45deg, transparent, transparent 4px, currentColor 4px, currentColor calc(2 * 4px))
}

Diagonal stripes right

.pattern-diagonal-stripes--right {
background: repeating-linear-gradient(-45deg, transparent, transparent 4px, currentColor 4px, currentColor calc(2 * 4px))
}

Double diagonal stripes

.pattern-double-diagonal-stripes {
background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, white 5px, white 50%), repeating-linear-gradient(45deg, black, black 5px, gray 5px, gray 50%);
background-size: 13px 13px;
}

Zigzag

.pattern-zigzag {
background: linear-gradient(135deg, currentColor 25%, transparent 25%) -5px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -5px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
background-size: calc(2 * 5px) calc(2 * 5px)
}

Zigzag 3D

.pattern-zigzag--3d {
background-color: white;
opacity: 1;
background: linear-gradient(135deg, black55 25%, transparent 25%) -8px 0/ 16px 16px, linear-gradient(225deg, black 25%, transparent 25%) -8px 0/ 16px 16px, linear-gradient(315deg, black55 25%, transparent 25%) 0px 0/ 16px 16px, linear-gradient(45deg, black 25%, white 25%) 0px 0/ 16px 16px;
}

Triangles

.pattern-triangles {
background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
background-size: 8px 8px;
}

Quarter circles

.pattern-quarter-circles {
background-image: radial-gradient(ellipse farthest-corner at 11px 11px, currentColor, currentColor 50%, transparent 50%);
background-size: 12px 12px;
}

Seigaiha

.pattern-seigaiha {
background-color: black;
background-image: radial-gradient(circle at 100% 150%, black 25%, white 25%, white 29%, black 29%, black 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, black 25%, white 25%, white 29%, black 29%, black 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, black 10%, black 23%, white 23%, white 30%, black 30%, black 43%, white 43%, white 50%, black 50%, black 63%, white 63%, white 70%, transparent 70%, transparent), radial-gradient(circle at 100% 50%, white 5%, black 5%, black 15%, white 15%, white 20%, black 20%, black 30%, white 30%, white 35%, black 35%, black 45%, white 45%, white 50%, transparent 50%, transparent), radial-gradient(circle at 0 50%, white 5%, black 5%, black 15%, white 15%, white 20%, black 20%, black 30%, white 30%, white 35%, black 35%, black 45%, white 45%, white 50%, transparent 50%, transparent);
background-size: 30px 15px;
}

Grey lines

.pattern-grey-lines {
background-color: white;
background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 50%, transparent 50%),
linear-gradient(rgba(0, 0, 0, .5) 50%, transparent 50%);
background-size: 8px 8px;
}

Wave

.pattern-wave {
background-image: radial-gradient(circle at center top, transparent, transparent 4px, currentcolor 4px, currentcolor 5px, transparent 5px, transparent), radial-gradient(circle at right bottom, transparent, transparent 4px, currentcolor 4px, currentcolor 5px, transparent 5px, transparent), radial-gradient(circle at left bottom, transparent, transparent 4px, currentcolor 4px, currentcolor 5px, transparent 5px, transparent);
background-size: 20px 10px;
}

Yin and Yang

Broken on chrome
.pattern-yin-yang {
background:
radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)) 50px 0,
radial-gradient(circle at 50% 41%, black 3%, currentcolor 4%, currentcolor 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)) 50px 0,
radial-gradient(circle at 50% 59%, currentcolor 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)) 0 50px,
radial-gradient(circle at 50% 41%, black 3%, currentcolor 4%, currentcolor 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)) 0 50px,
radial-gradient(circle at 100% 50%, currentcolor 16%, rgba(210, 202, 171, 0) 17%),
radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%),
radial-gradient(circle at 100% 50%, currentcolor 16%, rgba(210, 202, 171, 0) 17%) 50px 50px,
radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%) 50px 50px;
background-color: grey;
background-size: 20px 21px;
}

Circles

.pattern-circles {
opacity: 1;
background-image: radial-gradient(circle at center center, transparent, currentColor), repeating-radial-gradient(circle at center center, black, black, 4px, transparent 8px, transparent 4px);
background-blend-mode: hue;
}

Isometric cubes

.pattern-isometric-cubes {
background-color: <h1 id="ffffff" style="position:relative;"><a href="#ffffff" aria-label="ffffff; permalink" style="display: inline-block;width: 100%;height: 100%;position: absolute;"></a>ffffff;</h1>
opacity: 1;
background-image: linear-gradient(30deg, black 12%, transparent 12.5%, transparent 87%, black 87.5%, black), linear-gradient(150deg, black 12%, transparent 12.5%, transparent 87%, black 87.5%, black), linear-gradient(30deg, black 12%, transparent 12.5%, transparent 87%, black 87.5%, black), linear-gradient(150deg, black 12%, transparent 12.5%, transparent 87%, black 87.5%, black), linear-gradient(60deg, grey 25%, transparent 25.5%, transparent 75%, grey 75%, grey), linear-gradient(60deg, grey 25%, transparent 25.5%, transparent 75%, grey 75%, grey);
background-size: 14px 24px;
background-position: 0 0, 0 0, 7px 12px, 7px 12px, 0 0, 7px 12px;
}

Crosses

.pattern-crosses {
background-color: white;
opacity: 1;
background: radial-gradient(circle, transparent 20%, currentColor 20%, currentColor 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, currentColor 20%, currentColor 80%, transparent 80%, transparent) 15px 15px, linear-gradient(black 1.2px, transparent 1.2px) 0 -0.6px, linear-gradient(90deg, black 1.2px, currentColor 1.2px) -0.6px 0;
background-size: 30px 30px, 30px 30px, 15px 15px, 15px 15px;
}

Paper

.pattern-paper {
background-color: white;
opacity: 1;
background-image: linear-gradient(black 1.6px, transparent 1.6px), linear-gradient(90deg, black 1.6px, transparent 1.6px), linear-gradient(black 0.8px, transparent 0.8px), linear-gradient(90deg, black 0.8px, white 0.8px);
background-size: 20px 20px, 20px 20px, 4px 4px, 4px 4px;
background-position: -1.6px -1.6px, -1.6px -1.6px, -0.8px -0.8px, -0.8px -0.8px;
}

Credits

Most patterns were created by other people, then tweaked for my needs.

Non-exhaustive list: