tsParticles Sea Anemone Preset

tsParticles preset for creating a beautiful sea anemone like effect with particles spawned in the canvas center.

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:

<script src="https://cdn.jsdelivr.net/npm/tsparticles-engine@2/tsparticles.engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-basic@2/tsparticles.basic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-move-base@2/tsparticles.move.base.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-path-curves@2/tsparticles.path.curves.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-plugin-emitters@2/tsparticles.plugin.emitters.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-shape-circle@2/tsparticles.shape.circle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-color@2/tsparticles.updater.color.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-opacity@2/tsparticles.updater.opacity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-out-modes@2/tsparticles.updater.out-modes.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-size@2/tsparticles.updater.size.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-sea-anemone@2/tsparticles.preset.seaAnemone.min.js"></script>
Copy

This script MUST be placed after the tsParticles one.

Bundle

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

<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-sea-anemone@2/tsparticles.preset.seaAnemone.bundle.min.js"></script>
Copy

Usage

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

(async () => {
  await loadSeaAnemonePreset(tsParticles); // this is required only if you are not using the bundle script

  await tsParticles.load("tsparticles", {
    preset: "seaAnemone",
  });
})();
Copy

Customization

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

tsParticles.load("tsparticles", {
  particles: {
    shape: {
      type: "square", // starting from v2, this require the square shape script
    },
  },
  preset: "seaAnemone",
});
Copy

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).

import Particles from "react-particles";
import type { Engine } from "tsparticles-engine";
import { loadSeaAnemonePreset } from "tsparticles-preset-sea-anemone";

export class ParticlesContainer extends React.PureComponent<IProps> {
  // this customizes the component tsParticles installation
  async customInit(engine: Engine): Promise<void> {
    // this adds the preset to tsParticles, you can safely use the
    await loadSeaAnemonePreset(engine);
  }

  render() {
    const options = {
      preset: "seaAnemone",
    };

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

Vue (2.x and 3.x)

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

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

const particlesOptions = {
  preset: "seaAnemone",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadSeaAnemonePreset(engine);
}
Copy

Angular

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

const particlesOptions = {
  preset: "seaAnemone",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadSeaAnemonePreset(engine);
}
Copy

Svelte

<Particles
        id="tsparticles"
        options={particlesOptions}
        particlesInit={particlesInit}
/>
Copy

let particlesOptions = {
  preset: "seaAnemone",
};

let particlesInit = async (engine) => {
  await loadSeaAnemonePreset(engine);
};
Copy

flowchart TD

subgraph pa [Paths]
pac[Curves]
end

bb[tsParticles Basic] --> pa

subgraph pl [Plugins]
ple[Emitters]
end

bb --> pl

subgraph pr [Presets]
prsa[Sea Anemone]
end

bb & pac & ple --> prsa
Copy