Haikei
Web-based generator for unique SVG design assets: blobs, waves, layered shapes, backgrounds, posters, wallpapers, and other static visual material.
Design Position
| Field | Value |
|---|---|
| Design family | Motion, effects, texture, and illustration |
| Use when | Use when motion, effects, texture, sound, or illustration depends on Haikei. |
| System map | Design System Map |
| Proof path | Reduced-motion fallback, performance budget, and screenshot or video proof for the visual treatment. |
Routing Summary
Use Haikei for static SVG background and pattern assets when a page needs controlled decorative material. Export the asset, recolor it to project tokens, and verify it does not weaken contrast or make the product feel generic.
When to use it
Use Haikei when a design needs a quick static SVG asset: background waves, blobs, layered shapes, low-frequency texture, section separators, social-card material, or wallpaper/poster-style visuals. Export the asset and treat it like source material, not a live dependency.
The design value is speed and controlled export. It is not a substitute for art direction. Agents should use Haikei sparingly in product UIs; decorative generated SVGs can make a serious tool feel generic if they become the main visual idea.
Routing
| Need | Route |
|---|---|
| Static SVG background or pattern | Haikei, then save the exported asset locally. |
| Dither/lo-fi texture | Texture & Grain Resources, Dither, or ASCII Magic. |
| Animated shader treatment | Shader Effects Libraries or Shaders.com. |
| Component-level animation | Motion Primitives, React Bits, or Fancy Components. |
Version Snapshot
Haikei is a hosted design tool, not a versioned npm package in Kevin's stack. Current authority is the official site metadata checked 2026-06-29: it describes a web-based design tool for discovering, customizing, randomizing, and exporting generative SVG assets. The footer identifies z creative labs GmbH and a 2022 copyright.
Agent Rules
- Store any exported asset under the project's asset directory or
wiki/assets/when documenting it. - Recolor exported SVGs to project tokens before shipping.
- Check text contrast over any generated background.
- Do not stack Haikei shapes with gradient orbs, bokeh, or unrelated shader effects.
- Prefer static SVG export over runtime generation for decorative material.
Timeline
- 2026-07-01 | Design category refresh added this page to the Motion, effects, texture, and illustration family, linked it to Design System Map, and kept it standalone because Haikei owns a distinct design decision surface in this family. Source: User request, 2026-07-01
- 2026-06-29 | Added Haikei as the static SVG asset generator in the design effects shelf. Source: User request, 2026-06-29; https://haikei.app/