Skip to content

Surfaces

Blueprint pattern

Construction Variants Download

Three fill variants the blueprint ships

The same SVG geometry, with the logo-silhouette fill (the outer-ring annulus + the lower triangle peak) tinted differently for three use-contexts: the homepage hero, generic light surfaces, and dark surfaces.

  • Home - greyscale + dimmed via filter: brightness(0.15) saturate(0). Reads as a quiet dark watermark on the paper-cool homepage hero.
  • Light - darkened blue via filter: brightness(0.15). Adds a quiet brand-coloured texture on paper / light surfaces.
  • Dark - default blue at reduced opacity. Reads as a subtle glow on dark / navy surfaces.
  • The static SVG is uniformly #93B4F5 (peak-blue-lifted). Surfaces tint via CSS filters — desaturated for the homepage, default blue elsewhere.
  • When slotted into <AgentLoop> the pattern spins clockwise at 16s/cycle. See Experiments → Agent loop.
Blueprint pattern · Construction
Blueprint pattern · Download