【tsParticles】preset links の線の色を変更する

tsParticles を利用すると、ウェブページ内に動的な演出を追加できます。

今回、 tsParticles の links というプリセットを設定しました。

ところが、ドキュメントを見ても線の色を変える方法が分からない…。

ソースコードを見ていたところ、particles.links.color のようなコードを発見。これはもしや…と思い試したところ、以下のような指定で線の色を変更できました。

import { useCallback } from 'react'
import Particles from 'react-particles'
import type { Engine } from 'tsparticles-engine'
import { loadLinksPreset } from 'tsparticles-preset-links'

const ParticlesBackground = () => {
  // プリセットの読みこみ
  const particlesInit = useCallback(async (engine: Engine) => {
    await loadLinksPreset(engine)
  }, [])

  return (
    <Particles
      options={{
        preset: 'links', // ここでプリセットの指定
        particles: {
          links: {
            color: '#EBEBEB', // 線の色を変える
          },
          color: {
            value: '#EBEBEB', // ついでに点の色も変える（これはドキュメントに書いてある
          },
        },
      }}
      init={particlesInit}
    />
  )
}

こちらのコードは React ですが、他のライブラリでも、 options > particles の内容として設定すれば OK だと思います。

コンパイラかく語りき

import { Fun } from 'programming'

【tsParticles】preset links の線の色を変更する