<script src="https://unpkg.com"></script>
<css-doodle>
:doodle {
/* 1. Define your 3x3 grid size on the container */
@grid: 3 / 60vmin;
/* 2. STATIC BACKGROUND: Change this to your preferred backing color */
background: #111518;
border-radius: 8px;
overflow: hidden;
}
/* 3. YOUR EXACT VARIABLES & CELL GRAPHICS */
--c: #292F36, #4ECDC4, #F42272, #fff, #B27092;
background:
@p(
radial-gradient(circle at 0 0, @p(--c) 70.7%, #0000 0),
radial-gradient(@p(--c) 70.7%, #0000 0),
linear-gradient(45deg, @p(--c) 50%, #0000 0),
linear-gradient(@p(--c) 50%, #0000 0)
),
@p(--c);
/* 4. THE ANIMATION LAYER */
/* Combines your initial static rotation with an animated offset */
--initial-rotation: @p(10deg, 90deg, 180deg, 270deg);
animation: movePatterns 8s ease-in-out infinite alternate;
/* Staggers the animation start time for each cell */
animation-delay: calc(@r(-5000, 0) * 1ms);
/* 5. THE PURE CSS MOVEMENT KEYFRAMES */
@keyframes movePatterns {
0% {
/* Keep the cell centered and at its initial rotation */
transform: translate(0, 0) rotate(var(--initial-rotation)) scale(1);
}
50% {
/* Shift cells outward organically and slightly scale them down */
transform: translate(@r(-15px, 15px), @r(-15px, 15px)) rotate(calc(var(--initial-rotation) + 15deg)) scale(0.9);
}
100% {
/* Twist them slightly the other direction and slide to a new randomized spot */
transform: translate(@r(-25px, 25px), @r(-25px, 25px)) rotate(calc(var(--initial-rotation) - 15deg)) scale(1.05);
}
}
</css-doodle>
