Package Exports

tsparticles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tsparticles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tsparticles-preset-bigCircles

tsParticles preset for big colored circles on a white background.

Sample

demo

How to use it

CDN / Vanilla JS / jQuery

First of all install tsParticles following the instructions for vanilla javascript in the main project here

Once installed you need one more script to be included in your page (or you can download that from jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-big-circles"></script>

This script MUST be placed after the tsParticles one.

Once the scripts are loaded you can set up tsParticles like this:

tsParticles.load("tsparticles", {
  preset: "bigCircles", // also "big-circles" is accepted
});

Important ⚠️ You can override all the options defining the properties like in any standard tsParticles installation.

tsParticles.load("tsparticles", {
  particles: {
    shape: {
      type: "square",
    },
  },
  preset: "bigCircles", // also "big-circles" is accepted
});

Like in the sample above, the circles will be replaced by squares.

React.js / Preact / Inferno

The syntax for React.js, Preact and Inferno is the same.

I'll show a simplified sample you can find in this repository; it uses class component, but you can choose any syntax you prefer.

import Particles from "react-tsparticles";
import { Main } from "tsparticles";
import { loadPreset } from "tsparticles-preset-big-circles";

export class ParticlesContainer extends React.PureComponent<IProps> {
  // this customizes the component tsParticles installation
  customInit(tsParticles: Main) {
    // this adds the preset to tsParticles, you can safely use the
    loadPreset(tsParticles);
  }

  render() {
    const options = {
      preset: "bigCircles", // also "big-circles" is accepted
    };

    return <Particles options={options} init={this.customInit} />;
  }
}

JSPM

tsparticles