Gathering detailed insights and metrics for tsparticles-preset-big-circles
Installations
npm install tsparticles-preset-big-circlesDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.16.0
NPM Version
lerna/7.1.4/node@v18.16.0+arm64 (darwin)
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
7
Pug
TypeScript
JavaScript
CSS
Stylus
HTML
Shell
Pug (38.87%)
TypeScript (36.51%)
JavaScript (21.18%)
CSS (1.53%)
Stylus (1.48%)
HTML (0.35%)
Shell (0.08%)
Developer
tsparticles
Download Statistics
Total Downloads
31,447
Last Day
22
Last Week
86
Last Month
512
Last Year
3,377
GitHub Statistics
21 Stars
205 Commits
3 Forks
3 Watching
12 Branches
1 Contributors
Bundle Size
30.31 kB
Minified
8.88 kB
Minified + Gzipped
Sponsor this package
Maintainers
2
Package Meta Information
Latest Version
2.12.0
Package Id
tsparticles-preset-big-circles@2.12.0
Unpacked Size
670.82 kB
Size
167.29 kB
File Count
25
NPM Version
lerna/7.1.4/node@v18.16.0+arm64 (darwin)
Node Version
18.16.0
Publised On
04 Aug 2023
Total Downloads
Cumulative downloads
Total Downloads
31,447
Last day
-84.3%
22
Compared to previous day
Last week
-49.7%
86
Compared to previous week
Last month
184.4%
512
Compared to previous month
Last year
-63.1%
3,377
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
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
No vulnerabilities found.
No security vulnerabilities found.