tsParticles Avocado Palette

tsParticles palette for colored smoke amber.

Sample

Colors

`#1A1000`	`#3A2200`	`#6B3D00`	`#A65A00`	`#D98A1A`
`#FFC266`	`#090500`	`#081009`	`#C5E1A5`	`#9CCC65`
`#7CB342`	`#558B2F`	`#1B5E20`	`#3E2723`	`#FFA500`
`#FFEFD7`	`#000000`	`#FFFFFF`	`#F5F5F5`	`#1E1E1E`
`#252525`	`#E0E0E0`	`#A0A0A0`	`#404040`	`#1D3557`
Background `#1A1000`
Blend mode: `source-over` \| Fill: `true`

## Quick checklist

Install @tsparticles/engine (or use the CDN bundle below)
Load a base package (for example @tsparticles/basic) and call loadAvocadoPalette before tsParticles.load(...)
Apply the palette plus a minimal particles configuration in your options

A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.

How to use it

CDN / Vanilla JS / jQuery

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-avocado@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

Usage

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

(async engine => {
  await loadBasic(engine);
  await loadAvocadoPalette(engine);

  const options = {
    particles: {
      number: { value: 200 },
      shape: { type: "circle" },
      size: { value: { min: 10, max: 15 } },
      move: {
        enable: true,
        speed: 2,
      },
    },
    palette: "avocado",
  };

  await engine.load({
    id: "tsparticles",
    options,
  });
})(tsParticles);

Customization

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

Frameworks with a tsParticles component library

Checkout the documentation in the component library repository and call the loadAvocadoPalette function.

Presets and palettes catalog: https://github.com/tsparticles/palettes
Main docs: https://particles.js.org/docs/

@tsparticles/palette-avocado

Package Exports

Readme