that I wrote (Background image source
background-image: linear-gradient( transparent 0%,
#FF0018 0%, #FF0018 16.6%,
#FFA52C 16.6%, #FFA52C 33.2%,
#FFFF41 33.2%, #FFFF41 50%,
#008018 50%, #008018 66.6%,
#0000F9 66.6%, #0000F9 83.2%,
#86007D 83.2%, #86007D 100%,
transparent 100%);
background-image: linear-gradient( transparent 0%,
#ff69b6 0%, #ff69b6 12.5%,
#FF0018 12.5%, #FF0018 25%,
#FFA52C 25%, #FFA52C 37.5%,
#FFFF41 37.5%, #FFFF41 50%,
#008018 50%, #008018 62.5%,
#00C0C0 62.5%, #00C0C0 75%,
#400098 75%, #400098 87.5%,
#86007D 87.5%, #86007D 100%,
transparent 100%);
/*
This one needs the following two CSS properties to be defined:
@property --_w {
syntax: '<length>';
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: '<length>';
inherits: true;
initial-value: 100vh;
}
*/
--v-min: min(var(--_w), var(--_h));
--v-max: max(var(--_w), var(--_h));
--v-min-num: tan(atan2(var(--v-min),1px));
--v-max-num: tan(atan2(var(--v-max),1px));
--seed: calc(var(--v-max-num) - var(--v-min-num) + var(--v-max-num) / var(--v-min-num));
--rand1-index: var(--seed) + 1;
--rand2-index: var(--seed) + 2;
--rand3-index: var(--seed) + 3;
--rand4-index: var(--seed) + 4;
--rand5-index: var(--seed) + 5;
--rand6-index: var(--seed) + 6;
--rand1: mod(43 * var(--rand1-index) * var(--rand1-index) + 23 * var(--rand1-index) + 5,10);
--rand2: mod(43 * var(--rand2-index) * var(--rand2-index) + 23 * var(--rand2-index) + 5,10);
--rand3: mod(43 * var(--rand3-index) * var(--rand3-index) + 23 * var(--rand3-index) + 5,10);
--rand4: mod(43 * var(--rand4-index) * var(--rand4-index) + 23 * var(--rand4-index) + 5,10);
--rand5: mod(43 * var(--rand5-index) * var(--rand5-index) + 23 * var(--rand5-index) + 5,10);
--rand6: mod(43 * var(--rand6-index) * var(--rand6-index) + 23 * var(--rand6-index) + 5,10);
--measure: calc(var(--v-min) / 10);
background-color: white;
background-image: repeating-linear-gradient(transparent,
transparent calc(0px + var(--rand1) * var(--measure)),
#0009 calc(0px + var(--rand1) * var(--measure)),
#0009 calc(0px + 2 * var(--rand1) * var(--measure))
),
repeating-linear-gradient(90deg, transparent,
transparent calc(0px + var(--rand2) * var(--measure)),
#0009 calc(0px + var(--rand2) * var(--measure)),
#0009 calc(0px + 2 * var(--rand2) * var(--measure))
),
repeating-linear-gradient(transparent,
transparent calc(0px + var(--rand3) * var(--measure)),
#0006 calc(0px + var(--rand3) * var(--measure)),
#0006 calc(0px + 2 * var(--rand3) * var(--measure))
),
repeating-linear-gradient(90deg, transparent,
transparent calc(0px + var(--rand4) * var(--measure)),
#0006 calc(0px + var(--rand4) * var(--measure)),
#0006 calc(0px + 2 * var(--rand4) * var(--measure))
),
repeating-linear-gradient(transparent,
transparent calc(0px + var(--rand5) * var(--measure)),
#0003 calc(0px + var(--rand5) * var(--measure)),
#0003 calc(0px + 2 * var(--rand5) * var(--measure))
),
repeating-linear-gradient(90deg, transparent,
transparent calc(0px + var(--rand6) * var(--measure)),
#0003 calc(0px + var(--rand6) * var(--measure)),
#0003 calc(0px + 2 * var(--rand6) * var(--measure))
);
/* If you wonder why there is so much code for these few grey bars,
try resizing your browser window ;) */
background-color: #FFFFFF;
background-image: radial-gradient( 50% 50% at top,
#ff69b6 0%, #ff69b6 12.5%,
#FF0018 12.5%, #FF0018 25%,
#FFA52C 25%, #FFA52C 37.5%,
#FFFF41 37.5%, #FFFF41 50%,
#008018 50%, #008018 62.5%,
#00C0C0 62.5%, #00C0C0 75%,
#400098 75%, #400098 87.5%,
#86007D 87.5%, #86007D 100%,
transparent 100%),
radial-gradient( 50% 50% at bottom,
#86007D 0%, #86007D 12.5%,
#400098 12.5%, #400098 25%,
#00C0C0 25%, #00C0C0 37.5%,
#008010 37.5%, #008010 50%,
#FFFF41 50%, #FFFF41 62.5%,
#FFA52C 62.5%, #FFA52C 75%,
#FF0018 75%, #FF0018 87.5%,
#FF69B6 87.5%, #FF69B6 100%,
transparent 100%);
background-position: 0 0, 50px 0;
background-size: 100px 100px;
background: #002;
background-image:
linear-gradient(
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%
),
linear-gradient(
15deg,
transparent 7.5%, #0A0 7.5%,
#0A0 8.5%, transparent 8.5%,
transparent 28.5%, #0A0 28.5%,
#0A0 29.5%, transparent 29.5%,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%,
transparent 70.5%, #0A0 70.5%,
#0A0 71.5%, transparent 71.5%,
transparent 91.5%, #0A0 91.5%,
#0A0 92.5%, transparent 92.5%
),
linear-gradient(
30deg,
transparent 13%, #0A0 13%,
#0A0 14%, transparent 14%,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%,
transparent 86%, #0A0 86%,
#0A0 87%, transparent 87%
),
linear-gradient(
45deg,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%
),
linear-gradient(
60deg,
transparent 13%, #0A0 13%,
#0A0 14%, transparent 14%,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%,
transparent 86%, #0A0 86%,
#0A0 87%, transparent 87%
),
linear-gradient(
75deg,
transparent 7.5%, #0A0 7.5%,
#0A0 8.5%, transparent 8.5%,
transparent 28.5%, #0A0 28.5%,
#0A0 29.5%, transparent 29.5%,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%,
transparent 70.5%, #0A0 70.5%,
#0A0 71.5%, transparent 71.5%,
transparent 91.5%, #0A0 91.5%,
#0A0 92.5%, transparent 92.5%
),
linear-gradient(
90deg,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%
),
linear-gradient(
-15deg,
transparent 7.5%, #0A0 7.5%,
#0A0 8.5%, transparent 8.5%,
transparent 28.5%, #0A0 28.5%,
#0A0 29.5%, transparent 29.5%,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%,
transparent 70.5%, #0A0 70.5%,
#0A0 71.5%, transparent 71.5%,
transparent 91.5%, #0A0 91.5%,
#0A0 92.5%, transparent 92.5%
),
linear-gradient(
-30deg,
transparent 13%, #0A0 13%,
#0A0 14%, transparent 14%,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%,
transparent 86%, #0A0 86%,
#0A0 87%, transparent 87%
),
linear-gradient(
-45deg,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%
),
linear-gradient(
-60deg,
transparent 13%, #0A0 13%,
#0A0 14%, transparent 14%,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%,
transparent 86%, #0A0 86%,
#0A0 87%, transparent 87%
),
linear-gradient(
-75deg,
transparent 7.5%, #0A0 7.5%,
#0A0 8.5%, transparent 8.5%,
transparent 28.5%, #0A0 28.5%,
#0A0 29.5%, transparent 29.5%,
transparent 49.5%, #0A0 49.5%,
#0A0 50.5%, transparent 50.5%,
transparent 70.5%, #0A0 70.5%,
#0A0 71.5%, transparent 71.5%,
transparent 91.5%, #0A0 91.5%,
#0A0 92.5%, transparent 92.5%
);
background-size: 10em 10em;
background-color: #88FFBB;
background-image: radial-gradient( 8% 8% at 86% 90%,
#400098 0%, #400098 12.5%,
#00C0C0 87.5%, #00C0C0 100%,
transparent 100%),
radial-gradient( 8% 8% at 20% 80%,
#400098 0%, #400098 12.5%,
#00C0C0 87.5%, #00C0C0 100%,
transparent 100%),
radial-gradient( 8% 8% at 55% 32%,
#400098 0%, #400098 12.5%,
#00C0C0 87.5%, #00C0C0 100%,
transparent 100%),
linear-gradient(22deg,
transparent 0%, transparent 94%,
#00E800 94%, #007400 100%,
transparent 100%),
linear-gradient(-45deg,
transparent 0%, transparent 5%,
#007400 5%, #00E800 10%,
transparent 10%),
radial-gradient( 30% 30% at 0% 20%,
transparent 0%, transparent 33.3%,
#00E800 33.3%, #007400 66.6%,
transparent 66.6%, transparent 100%),
radial-gradient( 30% 30% at 100% 0%,
transparent 0%, transparent 33.3%,
#007400 33.3%, #00E800 66.6%,
transparent 66.6%, transparent 100%),
linear-gradient(22deg,
transparent 0%, transparent 22%,
#00E800 22%, #007400 29%,
transparent 29%),
radial-gradient( 8% 8% at 83% 60%,
#86007D 0%, #86007D 12.5%,
#FF69B6 87.5%, #FF69B6 100%,
transparent 100%),
radial-gradient( 8% 8% at 75% 78%,
#86007D 0%, #86007D 12.5%,
#FF69B6 87.5%, #FF69B6 100%,
transparent 100%),
radial-gradient( 8% 8% at 20% 20%,
#86007D 0%, #86007D 12.5%,
#FF69B6 87.5%, #FF69B6 100%,
transparent 100%),
radial-gradient( 50% 50% at left,
transparent 0%, transparent 33.3%,
#008600 33.3%, #004300 66.6%,
transparent 66.6%, transparent 100%),
radial-gradient( 50% 50% at right,
transparent 0%, transparent 33.3%,
#004300 33.3%, #008600 66.6%,
transparent 66.6%, transparent 100%),
linear-gradient(45deg, #22AA77 15%, transparent 25%),
linear-gradient(315deg, #22AA77 15%, transparent 25%);
background-position: 0 50px, 0 0;
background-size: 100px 100px;
background-color: #FFFFFF;
background-image: radial-gradient( 20% 20% at center,
#FFFFFF 0%, #CCCCCC 100%,
transparent 100%);
background-size: 20px 20px;
background-image: linear-gradient( transparent 0%,
#2288FF 0%, #2288FF 20%,
#FFFFFF 95%, transparent 100%);