<body>
  <div>
    <h3>C R E A T I V I T Y</h3>
    is just connecting things
  </div>


</body>
body{
  height:100vh;
/*   background:#0f0f0f; */
  display: flex;
  align-items: center;
  justify-content: center;
  color:hsl(0, 0%, 27%);
   font-family: Arial, Helvetica, sans-serif;
  
  animation:example ;
  animation-duration: 3s;
}
canvas{
 
  margin:20px;
  padding:5px;
  animation:example2 cubic-bezier(.56,1.08,.67,-0.13);
  animation-duration: 4s;
/*   box-shadow: 0 10px 10px -5px; */
}

@keyframes example {
  from { background:#0f0f0f;
        color:hsl(0, 0%, 63%);
  }
  to {background-color: #ffffff;
  color:hsl(0, 0%, 27%);}
}

@keyframes example2 {
  from {
    width:0px;
    height:0px;
  }
  to {
     width:510px;height:510px;}
}
import  canvasSketch from "https://cdn.skypack.dev/canvas-sketch@0.7.4";
import  canvasSketchUtil from "https://cdn.skypack.dev/canvas-sketch-util@1.10.0";




// const canvasSketch = require('canvas-sketch');
 
// Sketch parameters
const settings = {
  dimensions: [510,510],
  animate: true, 
  fps: 0
};

const random=canvasSketchUtil.random;
const math=canvasSketchUtil.math;


const animate = () => {
	requestAnimationFrame(animate);
};
animate();





const sketch = ({ context, width, height }) => {
	const agents = [];

	for (let i = 0; i < 30; i++) {
		const x = random.range(0, width);
		const y = random.range(0, height);

		agents.push(new Agent(x, y));
	}
   

	return ({ context, width, height }) => {
		context.fillStyle = 'hsl(0, 0%, 7%)';
		context.fillRect(0, 0, width, height);
    
    context.fillStyle = 'hsl(0, 0%, 10%)';
    context.strokeStyle = 'hsl(0, 0%, 75%)';

		for (let i = 0; i < agents.length; i++) {
      
			const agent = agents[i];

			for (let j = i + 1; j < agents.length; j++) {
       
				const other = agents[j];

				const dist = agent.pos.getDistance(other.pos);

				if (dist > 130) continue;

				context.lineWidth = math.mapRange(dist, 0, 100, 6, 2);

				context.beginPath();
         
				context.moveTo(agent.pos.x, agent.pos.y);
				context.lineTo(other.pos.x, other.pos.y);
				context.stroke();
			}
		}

		agents.forEach(agent => {
			agent.update();
			agent.draw(context);
			agent.bounce(width, height);
		});
	};
};


const sketch2 = () => {
  return ({ context, width, height }) => {
    // Margin in inches
    const margin = 1 / 4;

    // Off-white background
    context.fillStyle = 'hsl(0, 0%, 8%)';
    context.fillRect(0, 0, width, height);
    context.fillStyle = '#000000';
    context.strokeStyle = 'hsl(0, 0%, 75%)';
 
    let igap=0;
    let jgap=0;
    
    for (let i = 0; i < 6; i++) {
      
      for(let j=0;j<6;j++){
        console.log(igap,jgap);
        context.beginPath();
        context.arc(5+igap,5+ jgap, 3, 0, 2 * Math.PI);
        context.fill();
        context.stroke();
        jgap+=100;
      }
      jgap=0;
      igap+=100
 
    }
   
  };    
  };
canvasSketch(sketch2, settings);
canvasSketch(sketch, settings);





class Vector {
	constructor(x, y) {
		this.x = x;
		this.y = y;
	}

	getDistance(v) {
		const dx = this.x - v.x;
		const dy = this.y - v.y;
		return Math.sqrt(dx * dx + dy * dy);
	}
}

class Agent {
	constructor(x, y) {
		this.pos = new Vector(x, y);
		this.vel = new Vector(random.range(-1, 1), random.range(-1, 1));
		this.radius = random.range(4, 4);
	}

	bounce(width, height) {
		if (this.pos.x <= 0 || this.pos.x >= width)  this.vel.x *= -1;
		if (this.pos.y <= 0 || this.pos.y >= height) this.vel.y *= -1;
	}

	update() {
		this.pos.x += this.vel.x;
		this.pos.y += this.vel.y;
	}

	draw(context) {
		context.save();
		context.translate(this.pos.x, this.pos.y);

		context.lineWidth = 4;

		context.beginPath();
		context.arc(0, 0, this.radius, 0, Math.PI * 2);
		context.fill();
		context.stroke();

		context.restore();
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.