Random SVG background generator

Generate beautiful random SVG backgrounds on Node.js runtime.

Installation

npm i -S bgsvg
# or
yarn add bgsvg

Supported SVG backgrounds

Meteors

import { meteors } from "bgsvg";

const svg = await meteors({
  width: 800,
  height: 300,
  background: {
    colors: ["#000000", "#13137f"],
  },
  color: "#ba8003",
  densityX: 30,
  densityY: 2,
  thickness: 4,
  bidirectional: true,
  output: {
    type: "svg",
  },
});

console.log(svg);
// <svg xmlns="http://www.w3.org/2000/svg" width="800" height="300" viewBox="0 0 800 300"...

| Option | Default value | Description | | ------------- | ------------- | ------------------------------------ | | width | - | Width of the SVG | | height | - | Height of the SVG | | background | - | Background of the SVG | | color | - | Color of the meteors | | densityX | 30 | Average density of meteors on X-Axis | | densityY | 2 | Average density of meteors on Y-Axis | | thickness | 4 | Thickness of meteors | | bidirectional | true | Show meteors falling and rising | | output | {type: 'svg'} | Output format |

SVGs can have a solid color or a gradient background depending on the value of the background option.

export type CanvasBackground =
  | string
  | {
      x1?: string;
      y1?: string;
      x2?: string;
      y2?: string;
      colors: [string, string];
    };

You can generate SVG, PNG, JPEG, and Webp image based on the output option. When the output format is not SVG, then an image Buffer is returned.

type OutputTypeSvg = { type: "svg" };
type OutputTypePng = { type: "png" };
type OutputTypeWebp = { type: "webp" };
type OutputTypeJpeg = { type: "jpeg"; quality?: number };

rain

import { rain } from "bgsvg";

const svg = await rain({
  width: 800,
  height: 300,
  background: {
    colors: ["#27274c", "#121242"],
  },
  color: "#8f97c1",
  densityX: 20,
  densityY: 15,
  thickness: 1,
  randomness: 4,
});

console.log(svg);
// <svg xmlns="http://www.w3.org/2000/svg" width="800" height="300" viewBox="0 0 800 300"...

| Option | Default value | Description | | ---------- | ------------- | ---------------------------------------------- | | width | - | Width of the SVG | | height | - | Height of the SVG | | background | - | Background of the SVG | | color | - | Color of the rain drops | | densityX | 20 | Average density of drops on X-Axis | | densityY | 15 | Average density of drops on Y-Axis | | thickness | 1 | Thickness of the drop | | randomness | 4 | Randomness of the drops (more value, the less) | | output | {type: 'svg'} | Output format |

Development

Installation

yarn install

Preview server

yarn preview

This commands starts an express server at http://localhost:3003 to display how the SVGs would look like.

Test

yarn test