Creative CSS Doodles
A collection of unique and animated CSS art patterns
:doodle {
@grid: 12 / 100%;
background: #1a1a1a;
}
@place-cell: center;
@size: calc(@index() * 8%);
border-radius: 50%;
border: 2px solid hsla(
calc(20 * @index()),
70%,
68%,
@r(.8, 1)
);
transform: rotate(@r(360deg));
animation: spin @r(10s, 20s) linear infinite;
@keyframes spin {
to { transform: rotate(@pick(360deg, -360deg)) }
}
:doodle {
@grid: 10 / 100%;
background: #2a2a2a;
}
--hue: calc(360 + 3 * @row() * @col());
background: hsl(var(--hue), 70%, 60%);
clip-path: polygon(
@r(0, 100%)% @r(0, 100%)%,
@r(0, 100%)% @r(0, 100%)%,
@r(0, 100%)% @r(0, 100%)%
);
animation: morph @r(2s, 4s) ease-in-out infinite alternate;
@keyframes morph {
100% {
clip-path: polygon(
@r(0, 100%)% @r(0, 100%)%,
@r(0, 100%)% @r(0, 100%)%,
@r(0, 100%)% @r(0, 100%)%
);
}
}
:doodle {
@grid: 8 / 100%;
background: #232323;
}
background: @pick(
linear-gradient(
@p(#ff6b6b, #4ecdc4, #45b7d1),
@p(#ff6b6b, #4ecdc4, #45b7d1)
)
);
transform-origin: 50% 50%;
scale: @r(.8, 1.2);
rotate: @r(360deg);
animation: pulse @r(2s, 4s) ease infinite alternate;
@keyframes pulse {
0% { opacity: @r(.5, 1); scale: @r(.8, 1); }
100% { opacity: @r(.2, .8); scale: @r(1, 1.5); }
}
:doodle {
@grid: 12 / 100%;
background: #f5f5f5;
}
background: @pick(#FF6B6B, #4ECDC4, #45B7D1, #96CEB4);
transform: rotate(@r(360deg)) scale(@r(.8, 1.2));
clip-path: @pick(
polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%),
circle(40%),
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
);
animation: morphShape 4s ease infinite;
@keyframes morphShape {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(0.8); }
}
:doodle {
@grid: 8 / 100%;
background: #f5f5f5;
}
--hue: calc(200 + 5 * @row() * @col());
background: hsl(var(--hue), 80%, 60%);
margin: 1px;
border-radius: @r(10%, 50%);
transform-origin: center;
animation: colorWave 3s ease-in-out infinite;
@keyframes colorWave {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(@r(-15px, 15px)) scale(1.2); }
}
:doodle {
@grid: 16 / 100%;
background: #f5f5f5;
}
background: @pick(#FF6B6B, #4ECDC4, #45B7D1);
transform: rotate(@r(360deg));
clip-path: @pick(
triangle(50% at 50% 50%),
circle(40% at 50% 50%),
polygon(@r(40%, 60%)% @r(40%, 60%)%, @r(40%, 60%)% @r(40%, 60%)%, @r(40%, 60%)% @r(40%, 60%)%)
);
animation: kaleidoscope 5s linear infinite;
@keyframes kaleidoscope {
to { transform: rotate(360deg) scale(@r(.9, 1.1)); }
}
:doodle {
@grid: 10 / 100%;
background: #f5f5f5;
}
background: hsla(@r(360), 85%, 65%, @r(.7, .9));
margin: .5px;
border-radius: @r(5px, 15px);
transform-origin: center;
animation: pulse 4s ease-in-out infinite;
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(@r(.6, 1.4)) rotate(@r(-45deg, 45deg)); }
}
:doodle {
@grid: 14 / 100%;
background: #f5f5f5;
}
--color: @pick(#FF6B6B, #4ECDC4, #45B7D1, #96CEB4);
background: var(--color);
clip-path: @pick(circle(35%), polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%));
transform: rotate(@r(-360deg, 360deg));
animation: flow 6s ease infinite;
@keyframes flow {
0%, 100% { transform: translateX(0) rotate(0deg); }
50% { transform: translateX(@r(-10px, 10px)) rotate(@r(180deg)); }
}
:doodle {
@grid: 20 / 100%;
background: #f5f5f5;
}
background: @pick(
linear-gradient(45deg, #FF6B6B, #4ECDC4),
linear-gradient(-45deg, #45B7D1, #96CEB4)
);
transform: scale(@r(.8, 1.2));
clip-path: @pick(circle(30%), polygon(0 0, 100% 0, 100% 100%, 0 100%));
animation: mosaic 5s ease-in-out infinite;
@keyframes mosaic {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(@r(-90deg, 90deg)) scale(@r(.7, 1.3)); }
}