Cloud Theme

The clouds texture renders animated SVG clouds floating across a subtly tinted sky.

Cloud Rendering

Each cloud is a collection of overlapping ellipses filled with radial gradients, processed through SVG filters:

1. Radial gradients provide smooth opacity falloff from core to edge (multiple stops to prevent banding)
2. feTurbulence generates fractal noise unique to each cloud (via seed)
3. feGaussianBlur softens the source shapes
4. feDisplacementMap distorts edges using the noise, creating organic irregularity
5. Post-displacement blur smooths out contour artifacts from the displacement sampling

Filters use colorInterpolationFilters="sRGB" to prevent the dark halo artifact that occurs when blending semi-transparent shapes in linearRGB space.

Three cloud variants exist: large, medium, and small, each with different ellipse counts and arrangements. A separate "wisp" filter layer adds extra-diffuse outer edges.

Cloud Color

Cloud color is derived by:

Sky Gradient

The background is a vertical gradient with subtle tints derived from the accent color:

• Top: Cool tint (accent hue + 30°, low chroma)
• Bottom: Warm tint (accent hue - 30°, low chroma)

Give it a try with your next blog post, on your publication page, or site-wide from the sidebar.

The clouds on the homepage in the search bar container are also updated as of today with increased softness and less banding.