# svgwave: generating gradient SVG wave backgrounds, with a CLI to match

> svgwave is a small Preact tool for drawing the layered wave backgrounds that designers keep redrawing by hand, and its interesting development is the second surface: the same wave is now available as a generator in the Creatica CLI, so the output can be scripted, batched, or produced by an agent. The browser app tells you the exact command for whatever is on your canvas.

**anup-a/svgwave** — SVG Wave is a tiny, free and beautiful SVG gradient waves generator for your next design.

- Repository: https://github.com/anup-a/svgwave
- Website: https://www.svgwave.in
- Stars: 728 · Forks: 74
- Language: JavaScript
- License: NOASSERTION
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/anup-a-svgwave

## What it makes, and the shape of the output

SVG Wave is a tiny, free and beautiful gradient SVG waves generator for your UI or website design. It offers a dead simple UI to customize, and lets you style your waves based on your theme specifications.

The subject is a specific and recognisable one. Those layered wave shapes, the ones that sit at the top of a landing page or behind a hero section, are hand-drawn in any vector editor as a set of stacked paths with a gradient fill. They are also tedious to draw and tedious to adjust, because every crest and trough is a coordinate you have to move individually.

So the value is not that the tool is capable, it is that it removes a specific chore. The output is an SVG, which means the result scales, takes the colours of your theme, and weighs nothing.

The feature list is the set of knobs: adjust the number of layers of waves, modify the number of crests and troughs, change the colours of the waves, export as SVG or PNG, randomize, a dark mode, gradient fill to the waves, and animations.

The gradient fill is the feature that changed what the tool is for. A flat-fill wave is a shape, and a gradient-filled wave is a background that looks designed, which is the difference between an asset you paste in and an asset that looks like it belongs.

The site is svgwave.in, and the project is by Anup Aglawe.

## The CLI surface, and the Export SVG dialog that bridges the two

The most interesting development in this repository is not a feature, it is a second way in.

SVG Wave now ships as the svgwave generator in the Creatica CLI, so you can script, batch, or let an AI agent generate waves. The invocation looks like this:

```bash
npx @creatica/cli gen svgwave -w 1440 -h 500 -c "#F78DA7,#8ED1FC" --bg "#0000" \
  --set numRows=3 --set numCols=5 --set shapeHeight=7.5 -o wave.svg
```

The shape of the command is what tells you about the model. Width and height are flags, the colours are a comma-separated list passed to one option, the background is a separate option that here is set to a transparent value, and then the shape parameters are passed as generic key and value settings with a --set prefix.

That last part is the interesting design. Rather than inventing a dedicated flag for every geometric property, the generator takes a set of named settings, which means new parameters do not need a new CLI surface. numRows, numCols and shapeHeight are the same kind of value as anything a future version would add.

And then there is the bridge back to the browser. The Export SVG dialog on svgwave.in shows the exact command for the wave on your canvas. That is a well-judged piece of design. The browser app is where you explore, and when you like what you see you copy the command out of the dialog and use it as your starting point for whatever you are scripting.

So the workflow has two halves. You fiddle visually until the shape is right, then you take the command and automate. Without the dialog, the CLI would be unusable as a discovery tool, and without the CLI the browser tool would be a dead end for anyone generating more than one wave. The option reference for the settings lives in the Creatica CLI docs.

The related project is web-backgrounds, and the docs path is docs/CLI.md with an svg-wave anchor, which tells you the CLI documentation is maintained in a sibling repository rather than here.

## The stack, and a package.json that describes a different build than the README claims

The README describes the tool as a tiny UI tool built with Preact, tailwind and bundled with Webpack. The package manifest tells a slightly different story, and the differences are worth noting because they show a project that moved on.

The dependencies are preact at 10.11.3, along with react-color for the colour picker, react-github-btn for the sponsor button, react-toggle-dark-mode, save-svg-as-png for the PNG export, tailwind-percentage-heights-plugin, and zustand for state management. Those are all small and all specific.

The dev dependencies tell the build story. There is @preact/preset-vite, vite at 4.0.4, vite-plugin-svgr for importing SVG files as React components, postcss and autoprefixer, tailwindcss at 3.2.4, and eslint with eslint-config-preact.

So the actual build is Vite, not Webpack. The repository root confirms it with a vite.config.js and a postcss.config.js, and there is a .babelrc as well, which is usually left over from the Webpack era. The tailwind.config.js is there too. The README sentence about Webpack is simply out of date, which is a small but real signal about how much attention the prose gets compared to the code.

The interesting dependency is zustand. The tool has a canvas with a set of shape parameters, a colour list, an export dialog and a dark mode, and zustand is a small state container that avoids the React context boilerplate for that. Choosing it over a heavier solution is consistent with the rest of the stack.

The engine requirement is node 16 or newer, the scripts are the four Vite ones with a test script that echoes an error and exits, and the package name in the manifest is gradient-wave with version 1.0.0.

The name mismatch is worth flagging on its own. The npm package is called gradient-wave, the repository is svgwave, and the website is svgwave.in, and the licence in the package metadata is ISC while the platform records a custom licence for the repository. Any of those three could cause a problem if you are pulling the package into a product.

## Animations, and what they changed about the export

The two update notes at the top of the README are the closest thing the project has to a changelog at the top level, and they explain the two big capability jumps.

Update 1 added animation support, enabled by a simple click, and export as SVG. Update 2 added new gradient wave support.

The animation support is the more interesting of the two, because it changes the shape of the artefact rather than adding a decoration to it. A wave with animation is not a static path, it is a path with animation attributes or a repeating transform, and whether that survives the SVG export depends on how the animation is authored. A static wave exports as a file you can drop into any template. An animated wave exports as a file that only animates in contexts that honour the animation, and the other contexts show the first frame.

So the export step became more consequential when animations arrived. Before, exporting was a download. After, it is a decision about which contexts the result will work in.

The gradient support has the mirror-image effect on the visual side. A flat wave is one fill, and the fill colour is the same everywhere on the shape. A gradient wave has a gradient that runs across the shape, and the direction and stops of that gradient become part of the design rather than part of the shape.

Both features are mentioned in the feature list as separate entries, gradient fill to waves and added animations, which suggests they were developed as separate pieces of work rather than as one redesign. The randomize button is the other feature that belongs in this group, because it is what lets you explore a space of gradients quickly rather than adjusting sliders one at a time.

## Where the project is heading, and the licence question to settle first

There is a line at the top of the README that says Just launched, checkout, with a link to a broader tool for generating vector SVG backgrounds and patterns. So svgwave is now one generator inside a larger product, and the CLI is the shape that product is taking.

That is a meaningful change in what this repository is. It started as a standalone browser tool at svgwave.in, and it is becoming a generator inside a CLI that also does other things. The repository still holds the app, with src/ and public/ and lib/ directories, the index.html, the various favicon and icon files, a site.webmanifest and a browserconfig.xml, so the web app is still there and still the thing you visit.

The maintenance picture is straightforward. The last push to the repository was on 2026-10-09, the repository is not archived, and there are no GitHub releases, which for a web app is the normal arrangement since there is nothing to version other than a static site.

The licence is the thing to sort out. The platform records it as a custom licence that GitHub cannot classify, with a LICENSE file at the root as the authoritative text, while the package metadata in package.json declares ISC. Those are different answers, and the ISC declaration in a package manifest is not something a licence file can override for the person reading it. If you intend to ship generated waves inside a product, read the LICENSE file.

For contributions, the project asks for help fixing issues, adding customisation or improving the styling, and it lists six named contributors, with a contribution guide referenced and a Hacktoberfest mention in the section heading. The .deepsource.toml at the root indicates automated static analysis is configured, and the .eslintrc.json, .prettierrc.json and .babelrc are the usual JavaScript project furniture.

## Conclusion

Adopt svgwave if you need a wave background quickly and want the result as clean SVG rather than a screenshot, and use the CLI form if you are generating variations in bulk. Do not adopt it as a design system, because it produces one specific shape of asset and everything else about the page around it is still your problem. Before you commit the output, check the licence situation yourself, since the platform records a custom licence for the repository while the package metadata declares ISC, and remember that the gradient fill and the animation options are the two features that changed the tool's output shape most.

## FAQ

### How do I generate an SVG wave from the command line?

The svgwave generator ships in the Creatica CLI, so you run npx @creatica/cli gen svgwave with width, height, colour and background options, plus --set key=value pairs for shape parameters such as numRows, numCols and shapeHeight, and -o to name the output file.

### What can I change in an svgwave output?

You can adjust the number of layers of waves, modify the number of crests and troughs, change the colours of the waves, apply a gradient fill, turn on animation, randomize the result, and export as SVG or PNG.

### How do I get a command for a wave I built in the browser?

The Export SVG dialog on svgwave.in shows the exact command for the wave on your canvas, so you can copy it as the starting point for a script or a batch job.

### What licence does svgwave use?

The package metadata in package.json declares ISC, but the repository licence is recorded as a custom one that GitHub cannot classify, with a LICENSE file at the root as the authoritative text. Read that file if you plan to ship generated waves in a product.

## Sources

- [anup-a/svgwave on GitHub](https://github.com/anup-a/svgwave)
- [Issues](https://github.com/anup-a/svgwave/issues)
- [Project website](https://www.svgwave.in)
- [README](https://github.com/anup-a/svgwave/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/anup-a-svgwave