tsparticles / angular

Angular tsParticles official component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

I am unable to use fonts

mcwebdev opened this issue · comments

I am unable to use fonts as the particle.

"tsparticles": "^2.9.3",
    "tsparticles-engine": "^2.9.3",
    "tsparticles-shape-heart": "^2.9.3",
    "tsparticles-shape-text": "^2.10.1",

I have tried

 shape: {
        type: "text",
      },

as well as

particlesOptions = {
    fpsLimit: 120,
    interactivity: {
      modes: {
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    particles: {
      color: {
        value: "#ff00c0",
        opacity: 0.2,
      },
      links: {
        color: "#992d5f",
        distance: 150,
        enable: true,
        opacity: 0.2,
        width: 1,
      },
      collisions: {
        enable: true,
      },
      move: {
        direction: MoveDirection.none,
        enable: true,
        outModes: {
          default: OutMode.out,
        },
        random: false,
        speed: 1,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          area: 400,
        },
        value: 80,
      },
      opacity: {
        value: 0.2,
      },
      character: [
        {
          fill: true,
          font: "GeZodiac",
          style: "",
          value: ["a", "b", "c", "d", "e"],
          weight: "400"
        },
      ],
      image: {
        height: 100,
        replace_color: true,
        src: "images/github.svg",
        width: 100
      },
      polygon: { nb_sides: 5 },
      stroke: { color: "#ffffff", width: 1 },
      type: "char"
    },
    size: {
      anim: { enable: true, size_min: 10, speed: 10, sync: false },
      random: false,
      value: 16

    },
    detectRetina: true,
  };

I also am trying

 shape: {
        character: [
          {
            fill: true,
            font: "Verdana",
            style: "",
            value: "tsParticles".split(""),
            weight: "400"
          },
          {
            fill: false,
            font: "Verdana",
            style: "",
            value: "tsParticles".split(""),
            weight: "400"
          }
        ],
        image: {
          height: 100,
          replace_color: true,
          src: "images/github.svg",
          width: 100
        },
        polygon: { nb_sides: 5 },
        stroke: { color: "random", width: 1 },
        type: "char"
      },

I was able to get it working