波纹运动（Wave）

[Barrior]

https://jparticles.js.org/#/en/examples/wave

JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.

[Barrior]

避免图片加载闪烁：

function loadImage(url, successCallback) {
  const image = new Image()
  image.addEventListener('load', () => successCallback(image))
  image.crossOrigin = 'Anonymous'
  image.src = url
}

loadImage('https://raw.githubusercontent.com/Barrior/assets/main/github-logo-text.svg', (image) => {
  new JParticles.Wave('#demo', {
    num: 1,
    line: false,
    fill: true,
    fillColor: '#27C9E5',
    offsetTop: 0.5,
    crestHeight: 5,
    crestCount: 3,
    speed: 0.2,
    // 设置为已加载完毕的图像数据
    mask: image,
  })
})

或者使用 JParticles 内置的加载函数：

// ES6: import { loadImage } from 'jparticles/lib/utils'

JParticles.utils.loadImage('https://raw.githubusercontent.com/Barrior/assets/main/github-logo-text.svg', (image) => {
  new JParticles.Wave('#demo', {
    num: 1,
    line: false,
    fill: true,
    fillColor: '#27C9E5',
    offsetTop: 0.5,
    crestHeight: 5,
    crestCount: 3,
    speed: 0.2,
    // 设置为已加载完毕的图像数据
    mask: image,
  })
})