Introduction

GreenGale is introducing a new floral background. This joins the existing graph paper grid and the new cloud background as a background texture, selectable for user publications, individual posts, and/or site-wide.

Implementation

The floral texture is a procedurally generated 400×400px SVG tile that repeats seamlessly. It is generated entirely client-side from the active theme's colors and set as a CSS background-image data URI.

Color Derivation

Colors are derived in OKLCH color space from the theme inputs: background, text, and accent.

• Split-complementary harmony: Three anchor hues are computed from the accent color — the accent itself, +150°, and -150°.
• 8-color palette: Each anchor generates two variants (lighter/darker). A stem/leaf green and a pistil/center color complete the set.
• Subtlety mixing: All colors are mixed 75–80% toward the background color, keeping motifs relatively low-contrast, with the effect being a subtle background that provides a good balance of decoration and readability.

Motifs

Ten SVG shapes are randomly placed, weighted to favor smaller filler elements:

| Category | Motifs | Weight | |----------|--------|--------| | Flowers | 5-petal rose, 6-petal daisy, 4-petal cross, tulip, star flower | ~10 | | Fillers | Bud, berry cluster, sprig, single leaf, dot cluster | ~28 |

Each motif is placed at a random rotation and scale (0.4–1.1×), with colors shuffled from the palette.

Placement Algorithm

• Target density: 200 motifs per 400×400 tile
• Poisson-like rejection: Tracks placed positions and radii; rejects placements that overlap within 5px + random spacing
• Seamless wrapping: Motifs near tile edges are duplicated at opposite edges (8-way) to eliminate visible seams
• Deterministic pseudorandom number generation: Uses a seeded mulberry32 random generator (seed 31415) so the pattern is identical across page loads

Give it a try with your next blog post, on your publication page, or select it in the sidebar to apply the floral texture site-wide.