<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="generated-background">
<div class="text">
<h1>repeating radial background</h1>
<a
target="_blank"
href="https://dribbble.com/shots/2859124-DCX-Hypnotic-Background"
>original design</a
>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<script type="text/javascript">
const changeColor = () => {
document.body.style =
"color: #" +
[1, 2, 3, 4, 5, 6]
// generates lighter color, add 8 to a random number between 0 and 8
.map(_ => "0123456789abcdef"[Math.floor(Math.random() * 8 + 8)])
.join("");
};
window.onload = changeColor;
document.body.addEventListener("click", changeColor);
</script>
</body>
</html>
@import "../common.css";
:root {
--size: 40px;
--step: 4px;
--highlight: white;
--inverse: currentColor;
}
body {
color: white;
}
.generated-background {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas: "left right";
grid-row: 1fr 1fr;
transition: all linear 0.1s;
}
.left,
.right {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) var(--size),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
animation: water linear 1.8s infinite;
animation-fill-mode: forwards;
cursor: default;
}
.left {
--highlight: currentColor;
--inverse: white;
--origin: 100%;
grid-area: left;
}
.right {
--origin: 0;
grid-area: right;
}
@keyframes water {
5% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
10% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(2 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 2 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
15% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(3 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 3 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
20% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(4 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 4 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
25% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(5 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 5 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
30% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(6 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 6 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
35% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(7 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 7 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
40% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(8 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 8 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
45% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(9 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 9 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
50% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--highlight) 0,
var(--highlight) calc(10 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(var(--size) + 10 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(2 * var(--size))
);
}
55% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(1 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 1 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
60% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(2 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 2 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
65% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(3 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 3 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
70% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(4 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 4 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
75% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(5 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 5 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
80% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(6 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 6 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
85% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(7 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 7 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
90% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(8 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 8 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
95% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(9 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 9 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
100% {
background-image: repeating-radial-gradient(
circle at var(--origin),
var(--inverse) 0,
var(--inverse) calc(10 * var(--step)),
var(--highlight) 0,
var(--highlight) calc(var(--size) + 10 * var(--step)),
var(--inverse) 0,
var(--inverse) calc(2 * var(--size))
);
}
}
.text {
position: absolute;
left: calc(50% + 20px);
top: 40%;
padding: 1ch;
}
h1 {
font-family: "Arial Black";
color: black;
width: 10ch;
text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 0;
cursor: default;
}
a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: var(--inverse);
background: rgba(255, 255, 255, 0.7);
padding: 5px;
box-shadow: rgba(255, 255, 255, 0.2) 2px 2px 0 0;
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.