Introduction 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 gradi…
Read full update
Introduction 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 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)
