Polygon mask SVG image not working for tsparticles in React

I have a React project which I would like to embed my logo as a polygon mask using tsparticles. It works normally if I use the sample code from the official documentation page, however if I try to use the polygon mask option, it seems that it could not detect the SVG format. I don’t know whether this is a browser issue or not.

Below is the original code from codepen by the creator embedded to my React project. I have my own logo which I store locally but for this question, I’m going to use the code from the original author of the code.

import React from "react";
import { Container} from "@material-ui/core";
import Particles from "react-tsparticles";
//import polygonmasklogo from "./polygonmask.svg";


export default function Banner() {
 

  return (
    <Container >
      <Particles
        id="tsparticles"
        options={{
          background: {
            color: {
              value: "#fff",
            },
          },
          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: false,
              speed: 1,
              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: {polygonmasklogo},
            url: "https://cdn.matteobruni.it/images/particles/smalldeer.svg",
          },
        }}
      />
    </Container>
  );
}

Answer

The Polygon Mask feature requires pathseg library to work correctly in some browsers (Chrome removed the SVG 1.1 support in a recent version)

pathseg is a client-side library like tsParticles, so if you are using a framework that uses SSR you need to check the documentation for the client-side imports.

I have a working sample with Next.js here

This is the code needed for Next.js before returning the <Particles /> component:

if (process.browser) {
  require("pathseg");
}

If you are using React client-side just import pathseg like this:

import "pathseg";

This should fix your issue.

Advertisement

Answer