Blooming Night Garden Animation

This Blooming Night Garden Animation is a delightful example of “CSS Art,” where HTML elements are shaped into complex illustrations using code. It features a complete scene with a textured night sky, procedurally blooming flowers, swaying grass, and a particle system of floating hearts, all brought to life through choreographed CSS keyframes.

Core Technique

The component creates a rich visual experience by layering simple HTML elements styled with advanced CSS properties.

1. Drawing with CSS (border-radius & Gradients)

Instead of using images, every flower petal, leaf, and blade of grass is drawn using CSS. By manipulating border-radius with four values (e.g., 51% 49% 47% 53% / 44% 45% 55% 69%), the developer creates organic, non-uniform shapes that resemble nature. Linear and radial gradients add depth and lighting to these flat shapes.

.flower__leaf {
  /* Complex radius for organic shape */
  border-radius: 51% 49% 47% 53% / 44% 45% 55% 69%;
  background-image: linear-gradient(to top, #e6f331, #e6f331);
  box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5);
}

2. Orchestrated Start State

To ensure the animation plays smoothly from the beginning only when the page is ready, the code uses a “Paused by Default” strategy.

The body initially has a .container class, which forces all animations to paused. A tiny JavaScript snippet listens for onload and removes this class, acting as a global “Play” button for the scene.

/* Pause everything until JS removes this class */
.container * {
  animation-play-state: paused !important;
}

3. Responsive Scaling with vmin

The entire scene relies on vmin (viewport minimum) units. This ensures that the illustration maintains its aspect ratio and composition whether viewed on a vertical mobile screen or a horizontal desktop monitor.

Accessibility (A11y)

• Issues: The scene is purely decorative but composed of many DOM nodes that screen readers might try to traverse. The text is non-existent, but the visual noise is high.
• Fix: Apply aria-hidden="true" to the main container .night, .flowers, and .bubbles to hide the decorative content from assistive technologies. Crucially, wrap the animations in a prefers-reduced-motion media query to disable movement for users with vestibular disorders.