About Canvas Code

What it is

Canvas Code is a browser-based generator for animated HTML5 canvas effects - particle networks, fireworks, matrix rain, animated gradients, snow, and more. Tweak every parameter in real time. Export to standalone HTML, plain JavaScript, React component, embed snippet, or PNG snapshot.

Everything runs in your browser. Nothing is uploaded. Nothing is tracked.

Why it exists

Most "particle background" tools are either:

Paid lock-in widgets that don't give you the source
Heavy framework dependencies you don't want in your build
50 MB monorepos that take three minutes to compile

We built the opposite. Roughly 200 KB of vanilla JavaScript with no build step, no telemetry, no signup. Every effect is a self-contained class you can read in 10 minutes. The exported code has zero dependencies you don't choose.

Who built it

Canvas Code is built and maintained by Digital Fracture, an independent UK developer studio. We build production web apps and creative tooling.

If this tool saves you time and you'd like to support development without paying for it, you can buy us a coffee. It's appreciated but never expected.

License

Released free under the MIT license. In plain English:

✅ Use the exported code in personal projects
✅ Use it in commercial work, including paid client projects
✅ Modify it however you like
✅ Distribute it as part of your products
✅ No attribution required (though appreciated)
❌ The authors are not liable for anything that goes wrong

Tech stack

Vanilla JavaScript - no framework, no build step, no transpilation
Alpine.js - for tiny declarative UI bindings (~15 KB)
Custom CSS - no Tailwind / Bootstrap dependencies
HTML5 Canvas 2D API - for all rendering
localStorage - for theme + settings persistence; everything else is in-memory

Total project weight ≈ 200 KB. Loads instantly on any modern browser.

Frequently asked questions

Is there really no paid tier?

No. Everything is free. There's no premium plan, no signup wall, no watermark on exports. If you ever see one of those appear on Canvas Code, it's not us.

Can I use exported code commercially?

Yes. The MIT license explicitly permits commercial use, modification, distribution and private use.

Do you collect data on what I make?

No. There's no analytics, no telemetry, no server-side anything. Your tweaks and exports never leave your browser.

What browsers does the exported code support?

Anything with a standard 2D canvas API and ES2017 - practically every browser from 2018 onward. The exports have no polyfills and no transpilation.

Why is the exported canvas always responsive?

Every export reads its parent container's size on every frame, so it adapts to whatever element you drop it into. There's no baked-in resolution. Use the Preview viewport in the editor to see how it'll look at common destination sizes before exporting.

Can I add my own effects?

Yes - the architecture is designed to be readable. Each effect is one JS file extending BaseEffect, with controls registered in a single registry file. Open source contributions welcome.

How do I get help?

For bugs and feature requests: open an issue on the GitHub repo. For general questions: contact via Digital Fracture.