<canvas id="canvas"></canvas>
const numPoints = 10
const canvas = document.querySelector('#canvas')
const ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
ctx.fillStyle = 'black'
let points = []
for(let i = 0; i < numPoints; i++){
let point = {x: canvas.width/numPoints*i,
y: canvas.height/2}
points.push(point)
}
function render(seconds){
points.forEach( (point, i) =>{
ctx.beginPath()
point.x += (Math.random()-.5)*5
point.y += (Math.random() -.5)*5
ctx.rect( point.x, point.y, 5, 5)
ctx.fill()
})
window.requestAnimationFrame(render);
}
render()
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.