tsparticles / astro

tsParticles Astro official component
MIT License
33 stars 4 forks source link

The lines (links) connecting the circles are shown in dev mode but not shown in build mode #2

Closed sNishant011 closed 1 year ago

sNishant011 commented 1 year ago

The lines (links) connecting the circles are shown in dev mode but not shown in build mode. In Development mode:

image

In Build mode:

image

I am using astro-particles.

Here is my config:

{
  background: {
    color: {
      value: "#ffffff",
    },
  },
  fpsLimit: 60,
  fullScreen: {
    enable: true,
    zIndex: -1,
  },
  particles: {
    color: {
      value: "#74c043",
    },
    links: {
      color: "#74c043",
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1,
    },
    collisions: {
      enable: true,
    },
    move: {
      direction: "none",
      enable: true,
      outMode: "bounce",
      random: false,
      speed: 2,
      straight: false,
    },
    number: {
      density: {
        enable: true,
        value_area: 800,
      },
      value: 80,
    },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: "circle",
    },
    size: {
      random: true,
      value: 5,
    },
  },
}

Code


// ....

const coolParticles: ISourceOptions = {
  background: {
    color: {
      value: "#ffffff",
    },
  },
  fpsLimit: 60,
  fullScreen: {
    enable: true,
    zIndex: -1,
  },
  particles: {
    color: {
      value: "#74c043",
    },
    links: {
      color: "#74c043",
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1,
    },
    collisions: {
      enable: true,
    },
    move: {
      direction: "none",
      enable: true,
      outMode: "bounce",
      random: false,
      speed: 2,
      straight: false,
    },
    number: {
      density: {
        enable: true,
        value_area: 800,
      },
      value: 80,
    },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: "circle",
    },
    size: {
      random: true,
      value: 5,
    },
  },
};

<script>
  import { tsParticles } from "tsparticles-engine";
  import { loadFull } from "tsparticles";

  (async () => {
    await loadFull(tsParticles);
  })();
</script>

<Particles id="tsparticles" options={coolParticles} />

//...
KenjiPcx commented 1 year ago

I was able to replicate this too

matteobruni commented 1 year ago

Fixed in astro-particles v2.10.0, the README file is updated for this.