How to batch wave svg generation with api and template systems
- Step 1Define your wave configuration — Create a wave-config.json: set the wave parameters (amplitude, frequency, layers) once. Define a colour variants array with fill and background colours for each page section. The same wave shape will be rendered in each colour combination.
- Step 2Generate via API — POST to the /wave/batch endpoint with your config. The API returns the same wave SVG rendered in each colour variant. Save each variant with a descriptive name: wave-hero.svg, wave-pricing.svg, wave-footer.svg.
- Step 3Integrate into the build — Add the generation script to your prebuild step. In Next.js, waves in the public/ folder are served statically. Reference them with next/image or a standard img tag. The wave filenames can be derived from section names for easy lookup in templates.
Frequently asked questions
Can I generate waves with different widths for different viewport breakpoints?+
Yes. The API accepts a width parameter. Generate the same wave at 320px, 768px, and 1440px widths. Serve the appropriate width using the picture element's source elements with media queries. This ensures the wave looks correct at all breakpoints without horizontal stretching.
How do I maintain consistent wave shapes across pages of a multi-page site?+
Fix the amplitude, frequency, and seed parameters in your config file and use them for all wave generations. The seed parameter ensures the same random variation is applied to each colour variant — all your waves will look like siblings from the same visual family.
Can the API generate animated wave SVGs?+
Yes. Set animate: true and animationDuration: 8 in your API request. The response SVG includes CSS keyframe animations for the wave flowing effect. Batch-generate the animated versions for sections where motion is appropriate, and static versions for conservative sections.
How do I test wave colour contrast automatically?+
The API response includes a contrastRatio field computed from the wave fill colour against a white or black text overlay. Use this to validate that text placed over the wave section meets WCAG AA requirements (4.5:1 for normal text). Flag any colour combination below threshold for manual review.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.