如何使用particle.js在特定区域内渲染粒子

如何解决如何使用particle.js在特定区域内渲染粒子

我正在尝试在我的 angular 应用程序中使用particle.js。我的要求是使粒子在特定形状（如星形）内流动。但是我能看到的所有参考资料都说用粒子填充完整的视口。任何人都可以分享实现此场景的参考。

home.component.html

<div id="particles-js"></div>

home.component.ts

ngOnInit(): void {
    particlesJS.load('particles-js','assets/particles.json',function() {
      console.log('callback - particles.js config loaded');
    });
  }

particles.json

{
    "particles": {
        "number": {
            "value": 80,"density": {
                "enable": true,"value_area": 800
            }
        },"color": {
            "value": "#888fff"
        },"shape": {
            "type": "circle","stroke": {
                "width": 0,"color": "#000000"
            },"polygon": {
                "nb_sides": 5
            },"image": {
                "src": "img/github.svg","width": 100,"height": 100
            }
        },"opacity": {
            "value": 0.5,"random": false,"anim": {
                "enable": false,"speed": 1,"opacity_min": 0.1,"sync": false
            }
        },"size": {
            "value": 10,"random": true,"speed": 40,"size_min": 0.1,"line_linked": {
            "enable": true,"distance": 300,"color": "#ffffff","opacity": 0.4,"width": 2
        },"move": {
            "enable": true,"speed": 10,"direction": "none","straight": false,"out_mode": "out","bounce": false,"attract": {
                "enable": false,"rotateX": 600,"rotateY": 1200
            }
        }
    },"interactivity": {
        "detect_on": "canvas","events": {
            "onhover": {
                "enable": true,"mode": "repulse"
            },"onclick": {
                "enable": true,"mode": "push"
            },"resize": true
        },"modes": {
            "grab": {
                "distance": 800,"line_linked": {
                    "opacity": 1
                }
            },"bubble": {
                "distance": 800,"size": 80,"duration": 2,"opacity": 0.8,"speed": 3
            },"repulse": {
                "distance": 400,"duration": 0.4
            },"push": {
                "particles_nb": 4
            },"remove": {
                "particles_nb": 2
            }
        }
    },"retina_detect": true
}

当前阶段：