bun-svg

Create SVG and PNG images using TypeScript and JSX.

I created this as a way to make desktop backgrounds, but I'll be extending it to create images to concatenate into videos and plymouth boot screen animations.

Requirements

Install Bun and ImageMagick.

• Bun Javascript runtime and bundler.
• ImageMagick to convert SVG to PNG.
• swww to set desktop background (optional with --to-desktop flag)

If you're a Nix or Nixos user, you can run nix develop in the root directory, which will install Bun and ImageMagick into your shell environment. If you have direnv configured, type direnv allow in the root directory to autmatically initialize the shell environment upon entry.

bun install

To run, first copy the template component to whatever you want:

cp -r ./src/components/template ./src/components/whatever

bun run dev -- -d whatever

All flags:

--drawing     -d  drawing component to render
--output      -o  which display to put load the wallpaper to
--to-desktop      boolean whether to change the wallpaper

This will run the app and watch for changes. Images are written to ./images/$(componentName).{svg|png}

This project was created using bun init in bun v1.1.34. Bun is a fast all-in-one JavaScript runtime.