Polygon Masks not working in React

[Sujenphea]

Contact Details

sujenphea@gmail.com

What do you need?

I am currently working on a NextJS project, trying to implement the deer polygon mask from the link: https://codepen.io/matteobruni/pen/yLNpgKW.

The polygon deer masking is not appearing! The results I get is particles without any masking.
I have attached my code below and a screenshot of the result I get from running this piece of code.

import { chakra } from "@chakra-ui/react"
import { useCallback, useRef } from "react"
import Particles from "react-tsparticles"

import { loadFull } from "tsparticles"
import type { Container, Engine } from "tsparticles-engine"

export default function Artwork() {
  /* ---------------------------------- refs ---------------------------------- */
  const containerRef = useRef<Container | undefined>(undefined)

  /* -------------------------------- callbacks ------------------------------- */
  const particlesInit = useCallback(async (engine: Engine) => {
    // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(engine)
  }, [])

  const particlesLoaded = useCallback(async (container: Container | undefined) => {
    containerRef.current = container
  }, [])

  /* ---------------------------------- main ---------------------------------- */
  return (
    <chakra.div height="100%" width="100%">
      <Particles
        id="tsparticles"
        init={particlesInit}
        loaded={particlesLoaded}
        canvasClassName="canvasArtwork"
        params={{
          detectRetina: false,
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            events: {
              onHover: {
                enable: true,
                mode: "bubble",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 40,
                duration: 2,
                opacity: 8,
                size: 6,
                speed: 3,
              },
            },
          },
          particles: {
            color: {
              value: "#ff0000",
              animation: {
                enable: true,
                speed: 20,
                sync: true,
              },
            },
            lineLinked: {
              blink: false,
              color: "random",
              consent: false,
              distance: 30,
              enable: true,
              opacity: 0.3,
              width: 0.5,
            },
            move: {
              attract: {
                enable: false,
                rotate: {
                  x: 600,
                  y: 1200,
                },
              },
              bounce: false,
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: true,
              speed: 0.5,
              straight: false,
            },
            number: {
              density: {
                enable: false,
                area: 2000,
              },
              limit: 0,
              value: 200,
            },
            opacity: {
              animation: {
                enable: true,
                minimumValue: 0.05,
                speed: 2,
                sync: false,
              },
              random: false,
              value: 1,
            },
            shape: {
              type: "circle",
            },
            size: {
              animation: {
                enable: false,
                minimumValue: 0.1,
                speed: 40,
                sync: false,
              },
              random: true,
              value: 1,
            },
          },
          polygon: {
            draw: {
              enable: true,
              lineColor: "rgba(255,255,255,0.2)",
              lineWidth: 0.3,
            },
            move: {
              radius: 10,
            },
            inlineArrangement: "equidistant",
            scale: 0.5,
            type: "inline",
            url: "https://particles.js.org/images/smalldeer.svg",
          },
        }}
      />
    </chakra.div>
  )
}

tsParticles Version

2.5.3

Which library are you using?

React.js (react-particles, react-tsparticles, react-particles-js)

Code of Conduct

• I agree to follow this project's Code of Conduct

[matteobruni]

Starting from version 2.4.0 (changelog here) that plugin was removed from the tsparticles package, you have to add tsparticles-plugin-polygon-mask and load it after loadFull

[Sujenphea]

thank you