svelte에서 사용하고 싶지만particle.js 쉽게 하려면 라이브러리와 정보를 찾을 수 없기 때문에 메모로 사용합니다.
완성되면 이런 느낌에 나타난다.

또한 동작 환경과 설정의 전제로서 svelte는 공식적으로 소개한 방법에 따라 설치한 원형으로 사용된다.
저는 Sapper를 잘 몰라요.

절차.

1. 프로그램 라이브러리 설치

npm install particles.js

２、 rollup.config.js에서 output에 strict 설정하기: 가짜

export default {
  ...
  output: {
    ...
    strict: false,  
  },
  ...
}

롤러블럼이 계속 켜져 있다면 잠시 멈추고 실행할 필요가 있다.(가능)
이걸 하지 않으면 나중에 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them 이런 오류가 발생할 수 있어요.
자세한 내용은 다음 페이지에 나와 있습니다.
https://github.com/VincentGarreau/particles.js/issues/123

3. 실행 구성 요소 생성

<script>
  import { onMount } from "svelte";
  import "particles.js";

  const config = {
    particles: {
      number: {
        value: 80,
        density: {
          enable: true,
          value_area: 800,
        },
      },
      color: {
        value: "#ffffff",
      },
      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,
        anim: {
          enable: false,
          speed: 80,
          size_min: 0.1,
          sync: false,
        },
      },
      line_linked: {
        enable: true,
        distance: 300,
        color: "#ffffff",
        opacity: 0.4,
        width: 2,
      },
      move: {
        enable: true,
        speed: 12,
        direction: "none",
        random: false,
        straight: false,
        out_mode: "out",
        bounce: false,
        attract: {
          enable: false,
          rotateX: 600,
          rotateY: 1200,
        },
      },
    },
    interactivity: {
      detect_on: "canvas",
      events: {
        onhover: {
          enable: false,
          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,
  };

  onMount(() => {
    particlesJS("particles-js", config);
  });
</script>

<style>
  #particles-js {
    background: black;
  }
</style>

<div id="particles-js" />

참고로 vue-particlesjs의 코드 m()m

완성

상기 설정이 완료되면 3에서 만든 구성 요소를 적당히 읽으면 시작할 수 있습니다.

가장 적합한 곳

말은 간단하지만 반한 구석이 여럿 있으니 적어두자.

1. 설치된 라이브러리 오류

외출하기에 가장 적합한 곳이었지만 npm에 particles.js와 다른 프로그램 라이브러리particlejs가 있어 당초 제대로 확인하지 않고 설치했고, 공식 샘플 코드는 전혀 움직이지 않아 상당 기간 용해되는 어려움을 겪었다.
자꾸 그 이름이 닮았다고 생각하지 말고 공식 문서를 읽으면서 해보세요.

２、 particlesJS.load는 json의 읽기만 지원합니다

svelte 코드에서 설정을 바꾸고 싶어서 위에서 말한 particlesJS 실행 방법을 취했지만 공식적인 README와 샘플 코드는 자주 사용되었다particlesJS.load.particlesJS 생성된 입자 설정은 사용자에게 고스란히 전달되고particlesJS.load는 설명 설정의 json 파일을 읽고 실행하는 함수이기 때문에 설정을 사용자에게 직접 전달해도 절대로 이동하지 않습니다.
이것도'자꾸 이것도 될 것 같지 않냐'며 쓸데없는 시도를 하고 시간을 낭비한 것이다.
마지막으로 나는 코드를 읽었는데 이것은 절대로 안 된다고 느꼈다.

3. strict: 가짜 필요

2단계는 설명했지만 오류가 발생했을 때는 원인을 몰라서 잠시 여기저기 돌아다녔다.
또 잘못된 문구로 검색하면 맨 위에 링크의 해결 방법이 적힌 페이지가 나온다.(운다)

4. 표시 영역의 배경을 검은색으로 설정

블랙이 아니어도 되고...
그럼, 오류는 모두 제거되었고... 그런데 왜 안 나오지?
조사 결과 그려진 대상은 모두 흰색이어서 흰색 배경으로 보이지 않았다.배경이 까매지면 까마귀가 보여요.
※ 또 입자의 설정은 공식 README에 적힌 내용을 사용했습니다.
이상, 도움이 되었으면 좋겠습니다.