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:

• Radial gradients provide smooth opacity falloff from core to edge (multiple stops to prevent banding)
• feTurbulence generates fractal noise unique to each cloud (via seed)
• feGaussianBlur softens the source shapes
• feDisplacementMap distorts edges using the noise, creating organic irregularity
• 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:

| Background | Cloud Color | |------------|-------------| | Dark (L < 0.5) | 20% blend toward text color | | Light/pastel | White (#ffffff) | | Near-white (L > 0.95, C < 0.02) | 12% blend toward text color (subtle gray) |

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.