<header>
<div class="wrap">
<h1>Radial-gradient</h1>
<p>Patterns with
<a href="https://css-doodle.com" target="_blank">css-doodle</a>
and CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient" target="_blank">radial-gradient()</a>.
</p>
</div>
</header>
<ul class="patterns">
<li>
<css-doodle grid="7" #1>
overflow: hidden;
:after {
content: '';
position: absolute;
@size: 200%;
--pos: @pn(0 100%, 100% 0, 100% 100%, 0 0);
background:
repeating-radial-gradient(
circle at var(--pos),
transparent 0,
transparent @r(5%, 8%),
@p(#FFF4E0, #F8B501, #06ACB5, #FC3D3C) @lr(),
@lp() calc(@lr() + 1px)
),
@m(5, (
radial-gradient(
@pn(#F8B501, #FC3D3C, #06ACB5, #FFF4E0, #17191D) 50%,
transparent 0
)
var(--pos) / calc(@n() * 20%) calc(@n() * 20%) no-repeat
));
}
</css-doodle>
</li>
<li>
<css-doodle grid="7" #2>
overflow: hidden;
--pos: @pn(100% 50%, 0 50%);
:after {
content: '';
position: absolute;
@size: 1800% 600%;
background: @m(50, (
radial-gradient(
ellipse 80% 32%,
@pn(#FFF4E0, #06ACB5, #17191D, #FC3D3C, #F8B501) 45%,
transparent 0
)
var(--pos) / calc(@n() * 2%) calc(@n() * 2%)
no-repeat
));
}
</css-doodle>
</li>
<li>
<css-doodle grid="7" #3>
overflow: hidden;
:after {
content: '';
position: absolute;
@size: 900% 1022%;
--pos: @pn(100% 50%, 0 50%);
background: @multi(50, (
radial-gradient(
ellipse 100% 40%,
@pn(#F8B501, #FC3D3C, #17191D, #06ACB5, #FFF4E0) 50%,
transparent 0%
)
var(--pos) / calc(@n() * 2%) calc(@n() * 2%) no-repeat
));
}
@row(even) {
:after {
background: @multi(50, (
radial-gradient(
ellipse 100% 40%,
@pn(#17191D, #FC3D3C, #F8B501, #FFF4E0, #06ACB5) 50%,
transparent 0
)
var(--pos) / calc(@n() * 2%) calc(@n() * 2%) no-repeat
));
}
}
</css-doodle>
</li>
<li>
<css-doodle grid="7" #4>
background: @p(#FFF4E0, #F8B501, #06ACB5, #17191D, #FC3D3C);
:after {
content: '';
@size: 100%;
position: absolute;
background:
@m(4, radial-gradient(
circle at @p(-40% -40%, 140% 140%, 140% -40%, -40% 140%),
@p(#FFF4E0, #F8B501, #06ACB5, #17191D, #FC3D3C) 50%,
transparent 50%
)),
radial-gradient(
@p(#FFF4E0, #F8B501, #06ACB5, #17191D, #FC3D3C) @r(10%, 40%),
transparent 0
)
}
</css-doodle>
</li>
<!-- Need a way to simplify repeated colors -->
<li>
<css-doodle grid="8x1" #5>
:doodle {
background-color: #17191D;
background-image:
radial-gradient(@p(#FFF4E0, #F8B501, #06ACB5, #FC3D3C) 4%, transparent 0),
radial-gradient(#17191D 8%, transparent 0),
radial-gradient(@p(#FFF4E0, #F8B501, #06ACB5, #FC3D3C) 10%, transparent 0);
}
@place-cell: center;
@size: 50%;
transform-origin: -50% 50%;
transform: translateX(100%) rotate(calc(1turn / @size() * @i()));
:after, :before {
content: '';
position: absolute;
}
:after {
@size: 100% 72%;
right: 0%;
background:
radial-gradient(@pd(#FFF4E0, #F8B501, #06ACB5, #FC3D3C) 30%, transparent 0)
2% 50% / 25% 25% no-repeat,
radial-gradient(#17191D 50%, transparent 0)
5% 50% / 25% 25% no-repeat,
radial-gradient(@pd(#FFF4E0, #F8B501, #06ACB5, #FC3D3C) 70%, transparent 0)
8% 50% / 30% 30% no-repeat,
radial-gradient(#17191D 60%, transparent 0)
0% 50% / 50% 50% no-repeat,
radial-gradient(@pd(#FFF4E0, #F8B501, #06ACB5, #FC3D3C) 70%, transparent 0)
}
:before {
@size: 24%;
left: -27%;
transform-origin: -100% center;
transform: rotate(22deg);
background:
radial-gradient(ellipse 100% 80%, @pd(#FFF4E0, #F8B501, #06ACB5, #FC3D3C) 50%, transparent 0)
20% 50% / 40% 40% no-repeat,
radial-gradient(ellipse 100% 80%, #17191D 50%, transparent 0)
10% 50% / 80% 80% no-repeat,
radial-gradient(ellipse 100% 80%, @pd(#FFF4E0, #F8B501, #06ACB5, #FC3D3C) 50%, transparent 0)
0 / 100% 100% no-repeat;
}
</css-doodle>
</li>
<li>
<css-doodle grid="7" #6>
:doodle {
background-color: @p(#F8B501, #06ACB5, #FC3D3C);
}
transform: rotate(@pn(45deg, -45deg)) scale(.9);
--c: @p(#FFF4E0, #F8B501, #06ACB5, #FC3D3C);
background-repeat: space;
background-position: center;
background-color: #17191D;
background-image: @m(4, radial-gradient(var(--c) 35%, transparent 0));
background-size: @m(4, @pn(100% 40%, 40% 100%));
@random(.5) {
background-size: @m(4, @pn(25% 25%, 25% 25%));
}
@random(.4) {
background-size: @m(4, @pn(100% 30%, 30% 100%));
}
@random(.3) {
background-size: @m(4, @pn(100% 45%, 45% 100%));
}
@random(.2) {
background-size: @m(4, @pn(60% 45%, 45% 60%));
}
@random(.2) {
background-image: @m(4, (radial-gradient(var(--c) 50%, transparent 0)));
background-size: @m(4, @pn(100% 60%, 60% 100%));
}
:after {
content: '';
position: absolute;
left: @pn(auto, 105%);
top: @pn(105%, auto);
@size: 50%;
background-image: radial-gradient(
@p(#17191D, #FFF4E0) @r(20%, 60%), transparent 0
);
}
</css-doodle>
</li>
</ul>:root {
--size: 16em;
}
@media screen and (max-width: 36.25em) {
:root {
--size: 11em;
}
}
html, body, ul, li, header, h1, p {
margin: 0;
padding: 0;
}
body {
background: #F7F8F8;
font-family: Georgia, "Nimbus Roman No9 L", serif;
}
header {
color: #093b3e;
padding: 8vmin 0 2vmin;
position: relative;
overflow: hidden;
}
header a {
color: #093b3e;
text-decoration: underline;
}
header a:hover {
color: #FC3D3C;
}
header p {
margin-top: .5em;
color: #093b3e7a;
}
.wrap, .patterns {
max-width: 67.5em;
margin: 0 auto;
padding: 0 1.5em;
box-sizing: border-box;
}
.patterns {
list-style: none;
width: 100%;
margin: 2em auto 8vmin;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--size), 1fr));
grid-gap: 1vmin;
}
ul li {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
.patterns css-doodle {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
overflow: hidden;
}document.addEventListener('click', e => e.target.update && e.target.update())
External CSS
This Pen doesn't use any external CSS resources.