tsParticles Big Circles Preset

tsParticles preset for big colored circles on a white background.

Sample

How to use it

CDN / Vanilla JS / jQuery

The first step is installing 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:

1<script src="https://cdn.jsdelivr.net/npm/tsparticles-engine@2/tsparticles.engine.min.js"></script>
2<script src="https://cdn.jsdelivr.net/npm/tsparticles-move-base@2/tsparticles.move.base.min.js"></script>
3<script src="https://cdn.jsdelivr.net/npm/tsparticles-plugin-emitters@2/tsparticles.plugin.emitters.min.js"></script>
4<script src="https://cdn.jsdelivr.net/npm/tsparticles-shape-circle@2/tsparticles.shape.circle.min.js"></script>
5<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-color@2/tsparticles.updater.color.min.js"></script>
6<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-opacity@2/tsparticles.updater.opacity.min.js"></script>
7<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-out-modes@2/tsparticles.updater.out-modes.min.js"></script>
8<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-size@2/tsparticles.updater.size.min.js"></script>
9<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-big-circles@2/tsparticles.preset.bigCircles.min.js"></script>

Bundle

A bundled script can also be used, this will include every needed plugin needed by the preset.

1<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-big-circles@2/tsparticles.preset.bigCircles.bundle.min.js"></script>

Usage

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

1(async () => {
2  await loadBigCirclesPreset(tsParticles); // this is required only if you are not using the bundle script
3
4  await tsParticles.load("tsparticles", {
5    preset: "bigCircles", // also "big-circles" is accepted
6  });
7})();

Customization

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

1tsParticles.load("tsparticles", {
2  particles: {
3    shape: {
4      type: "square", // starting from v2, this require the square shape script
5    },
6  },
7  preset: "bigCircles", // also "big-circles" is accepted
8});

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.

This sample uses the class component syntax, but you can use hooks as well (if the library supports it).

1import Particles from "react-particles";
2import type { Engine } from "tsparticles-engine";
3import { loadBigCirclesPreset } from "tsparticles-preset-big-circles";
4
5export class ParticlesContainer extends React.PureComponent<IProps> {
6  // this customizes the component tsParticles installation
7  async customInit(engine: Engine): Promise<void> {
8    // this adds the preset to tsParticles, you can safely use the
9    await loadBigCirclesPreset(engine);
10  }
11
12  render() {
13    const options = {
14      preset: "bigCircles", // also "big-circles" is accepted
15    };
16
17    return <Particles options={options} init={this.customInit} />;
18  }
19}

Vue (2.x and 3.x)

The syntax for Vue.js 2.x and 3.x is the same

1<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />

1const particlesOptions = {
2  preset: "bigCircles", // also "big-circles" is accepted
3};
4
5async function particlesInit(engine: Engine): Promise<void> {
6  await loadBigCirclesPreset(engine);
7}

Angular

1<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>

1const particlesOptions = {
2  preset: "bigCircles", // also "big-circles" is accepted
3};
4
5async function particlesInit(engine: Engine): Promise<void> {
6  await loadBigCirclesPreset(engine);
7}

Svelte

1
2<Particles
3        id="tsparticles"
4        options={particlesOptions}
5        particlesInit={particlesInit}
6/>

1let particlesOptions = {
2  preset: "bigCircles", // also "big-circles" is accepted
3};
4
5let particlesInit = async (engine) => {
6  await loadBigCirclesPreset(engine);
7};

---

1flowchart TD
2
3subgraph m [Movers]
4mb[Base]
5end
6
7e[tsParticles Engine] --> m
8
9subgraph pl [Plugins]
10ple[Emitters]
11end
12
13e --> pl
14
15subgraph s [Shapes]
16sc[Circle]
17end
18
19e --> s
20
21subgraph u [Updaters]
22uc[Color]
23uop[Opacity]
24uou[Out Modes]
25usi[Size]
26
27end
28
29e --> u
30
31subgraph pr [Presets]
32prbi[Big Circles]
33end
34
35e --> pr
36
37mb & ple & sc & uc & uop & uou & usi --> prbi