Animated Canvas Gradient Background

Animated Canvas Gradient Background.jsx

const animatedCanvasGradient = () => {
    useEffect(() => {
      animateCanvas('canvas')
    }, [])
    return (
      <canvas
        id="canvas"
        width="26"
        height="26"
        style={{
          width: '100%',
          height: '100%',
          position: 'absolute',
          zIndex: 1,
        }}
      />
    )
  }

const animateCanvas = (canvasId) => {
    const canvasElement = document.getElementById(canvasId)
    if (!canvasElement) {
      return
    }
    const canvas = canvasElement.getContext('2d')
    const col = (x, y, r, g, b) => {
      canvas.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')'
      canvas.fillRect(x, y, 1, 1)
    }
    const R = (x, y, t) => {
      return Math.floor(47 + 6 * Math.cos((x * x - y * y) / 200 + t))
    }
  
    const G = (x, y, t) => {
      return Math.floor(
        147 +
          24 *
            Math.sin((x * x * Math.cos(t / 0.6) + y * y * Math.sin(t / 3)) / 600)
      )
    }
  
    const B = (x, y, t) => {
      return Math.floor(
        185 +
          28 *
            Math.sin(
              6 * Math.sin(t / 3) +
                ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 2000
            )
      )
    }
  
    let time = 0
  
    var start = () => {
      for (let x = 0; x <= 100; x++) {
        for (let y = 0; y <= 100; y++) {
          col(x, y, R(x, y, time), G(x, y, time), B(x, y, time))
        }
      }
      time = time + 0.038
      window.requestAnimationFrame(start)
    }
  
    start()
  }

Animated Canvas Gradient Background.md

const animateCanvas = (canvasId) => {
    const canvasElement = document.getElementById(canvasId)
    if (!canvasElement) {
      return
    }
    const canvas = canvasElement.getContext('2d')
    const col = (x, y, r, g, b) => {
      canvas.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')'
      canvas.fillRect(x, y, 1, 1)
    }
    const R = (x, y, t) => {
      return Math.floor(47 + 6 * Math.cos((x * x - y * y) / 200 + t))
    }
  
    const G = (x, y, t) => {
      return Math.floor(
        147 +
          24 *
            Math.sin((x * x * Math.cos(t / 0.6) + y * y * Math.sin(t / 3)) / 600)
      )
    }
  
    const B = (x, y, t) => {
      return Math.floor(
        185 +
          28 *
            Math.sin(
              6 * Math.sin(t / 3) +
                ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 2000
            )
      )
    }
  
    let time = 0
  
    var start = () => {
      for (let x = 0; x <= 100; x++) {
        for (let y = 0; y <= 100; y++) {
          col(x, y, R(x, y, time), G(x, y, time), B(x, y, time))
        }
      }
      time = time + 0.038
      window.requestAnimationFrame(start)
    }
  
    start()
  }

<canvas
  id="canvas"
  width="26"
  height="26"
  style={{
    width: '100%',
    height: '100%',
    position: 'absolute',
    zIndex: 1,
  }}
/>