Vayro Docs

Vayro is a motion-first animated SVG background engine. Design, customize, and export animated backgrounds as SVG, CSS, or PNG. No code required.

1. Select an engine from the left sidebar.
2. Adjust colors, animation, and parameters from the right panel.
3. Choose a preset or start from scratch.
4. Export as SVG (with embedded CSS animation), static SVG, or PNG.

• Animated SVG: self-contained, CSS keyframe animations embedded.
• Static SVG: no animation, scalable vector.
• PNG: raster, current frame snapshot.
• Canvas sizes: seven presets including Full HD (1920×1080) and 4K (3840×2160), plus a custom size option (400 to 3840 × 200 to 2160).

Layered SVG paths that flow across the canvas with seamless looping motion.

• Layer count, Complexity, Amplitude
• Wave type, Direction, Speed
• Stroke, Per-layer blur, Per-layer colors

Hero section backdrops, header bands, full-page atmospheres.

Organic blob shapes that bounce, drift, and wobble around the canvas.

• Blob count, Distortion, Size variance
• Animation speed, Blur, Stroke
• Mood palette, Background color

Soft organic accents behind product shots, marketing pages, and decorative panels.

Multi-anchor radial, linear, or vignette gradient mesh with animated colour blending.

• Mode (Radial / Linear / Vignette)
• Points, Spread, Size, Variance
• Angle (Linear only), Blur, Mood palette

Aurora-style hero gradients, ambient app backgrounds, atmospheric splash screens.

Scattered geometric shapes (circle, triangle, square, pentagon, hexagon, star, diamond, octagon), animated with float, pulse, drift, and rotation.

• Shape types (multi-select), Count, Size
• Style mode (Filled / Outline / Mixed)
• Color mode (Single / Palette / Random)
• Animation type, Float direction, Rotation

Particle backdrops, abstract product pages, decorative section dividers.

All exported SVG files use a vayro-{engine}-{element} class naming convention. Class names in the SVG always match the selectors in the exported CSS, so the result drops into any project without renaming a single attribute.

vayro-wave-path
vayro-blob-shape
vayro-mesh-node
vayro-scatter-shape

This contract is stable, safe to target with your own CSS.

The Export panel exposes three actions, all driven by the current Animated/Static toggle:

• Copy SVG: copies the SVG markup to the clipboard, ready to paste into any HTML, JSX, Vue, or Svelte file.
• Download SVG: saves the SVG to disk as a .svg file.
• Download PNG: saves a raster snapshot of the current frame as a .png file.

CSS keyframes are embedded inside the SVG when Animated mode is active, so a separate “Copy CSS” step isn't needed.

• Animated: CSS keyframe animations embedded in the SVG. Self-contained, no extra setup.
• Static: no animation, instant render. Use when motion isn't needed.

Every engine is fully seeded. The same configuration plus seed produces the same SVG, byte for byte, on every render. Lock in a look once you find it, embed the same background across pages, or pin a preset to a known output.

All exported animations respect the user's prefers-reduced-motion: reduce media query. When that preference is set, the keyframe animations stop and the SVG renders as its static frame, with no extra wiring required.

• Multiple presets available per engine.
• Each preset sets colors, parameters, and animation speed.
• Presets can be customized after selection. Adjust anything from the right panel and your changes layer on top.

• 4 engines: Wave, Blob, Mesh Gradient, Shape Scatter.
• Animated SVG export with embedded CSS keyframes.
• Static SVG and PNG export.
• Multiple presets per engine.
• vayro-* CSS class naming contract.
• Canvas sizes: Full HD (1920×1080), 4K (3840×2160), and five other presets plus custom.