DEV Community

Cover image for tsParticles 2.7.0 Released
Matteo Bruni for tsParticles

Posted on


tsParticles 2.7.0 Released

tsParticles 2.7.0 Changelog

Bug Fixes

  • Fixed issue with animation random size, multiplying again the pixel ratio
  • Added missing export EventType
  • Fixed Engine package exports

New Features

  • Added shape options to circle, added range (min/max object) values to polygon and star shape options
  • Changed default file for slim and full bundles, using the bundled file
  • Added support for multiple shape drawers declared at once instead of adding a shape drawer multiple times
  • Added ranged values in stroke width and opacity properties
  • Added loops count to color animations
  • Improved density values, now is 1:1 with number on 1080p resolution with pixel ratio of 1 (this is not a breaking change since nothing breaks, but it changes the behavior of existing values)
  • Density values now has width/height values instead of area/factor, for compatibility reason width is mapped to area and height to factor.
  • Created sounds plugin, with mute/unmute icons
  • Added explosion sounds to fireworks preset

Circle Options

In particle.shape now it's possible to set another option to the circle shape, angle. The new property accepts a number or a { min: number; max: number } object, when only number it's going to be { min: 0, max: <value> }.

This creates partial circles starting from min to max, both values must be specified in degrees. If this value is ignored the default value is: { min: 0, max: 360 } (the full circle).


  shape: {
    type: "circle",
    options: {
      circle: {
        angle: 180
Enter fullscreen mode Exit fullscreen mode

This examples creates horizontal half circles

  shape: {
    type: "circle",
    options: {
      circle: {
        angle: { min: 90, max: 270 }
Enter fullscreen mode Exit fullscreen mode

This examples creates vertical half circles

Density options

The density options are changed a bit, instead of area/factor values, the width/height values are introduced and mapped respectively. The default values are changed to width 1920 and height 1080, so on a FullHD resolution on device pixel ratio 1 the particles number is the one specified in the options. Since width and height are multiplied together, they can be swapped and nothing changes.

The formula for the density is:

canvasWidth*canvasHeight \over densityWidth*densityHeight*devicePixelRatio^2
Enter fullscreen mode Exit fullscreen mode

Notes on existing configurations

Since many configs had a density.area value of 800, you'll see less particles, just a few less. If you have also a factor value, you won't notice any difference. When only area is set, if you want to keep the previous configuration, set factor to 1000. Since the default factor (height) value is 1080 now, the difference should be barely noticeable.


Social links

GitHub logo matteobruni / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.


tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components

GitHub Sponsors jsDelivr hits (npm) Cdnjs npm npm lerna CodeFactor Codacy Badge Rate this package Gitpod Ready-to-Code Run on

Discord Slack WhatsApp Telegram Reddit

tsParticles Product Hunt Buy Me A Coffee Linktree

Table of Contents

⚠️⚠️ _This readme refers to v2 version, read here for v1 documentation* ⚠️⚠️

Do you want to use it on your website?

Documentation and Development references here 📖

This library

Top comments (0)

This is your brain on JavaScript (classic DEV post)

brain computer interface

Experimenting with brain-computer interfaces in JavaScript