``<div id="display"></div>``
``````html, body { background: black; }
#display { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
svg circle { fill: white; opacity: 0.5; }
svg line { stroke: white; stroke-width: 2px; }``````
``````// modelling functions
var step = (a, x) => x >= a ? 1 : 0,
clamp = (a, b, x) => Math.max(a, Math.min(b, x)),
map = (a, b, c, d, x) => (x - a) / (b - a) * (d - c) + c,
smoothstep = (a, b, x) => {
let t = clamp(0, 1, map(a, b, 0, 1, x));
return t * t * t * ((6 * t - 15) * t + 10);
};

class Vec2d {
constructor(x, y) { this.reset(x, y); }
get mag() { return Math.sqrt(this.dot(this)); }
clone() { return new Vec2d(this.x, this.y); }
reset(x, y) { this.x = x; this.y = y; return this; }
neg() { return this.scale(-1); }
norm() {
let m = this.mag;
if (m > 0) return this.scale(1 / m);
return this;
}
let x, y;
if (a instanceof Vec2d) {
x = a.x; y = a.y;
} else {
x = a; y = b;
}
this.x += x;
this.y += y;
return this;
}
sub(a, b) {
let x, y;
if (a instanceof Vec2d) {
x = a.x; y = a.y;
} else {
x = a; y = b;
}
this.x -= x;
this.y -= y;
return this;
}
scale(a) {
this.x *= a;
this.y *= a;
return this;
}
dot(a, b) {
let x, y;
if (a instanceof Vec2d) {
x = a.x; y = a.y;
} else {
x = a; y = b;
}
return this.x * x + this.y * y;
}
static sub(a, b) { return a.clone().sub(b); }
static dot(a, b) { return a.dot(b); }
}

class Particle {
constructor(position) {
this.position = position;
this.force = new Vec2d(0, 0);
}
}

class Simulation {
constructor(particles) {
this.particles = particles;
}

static get NODE_DISTANCE() { return 2; }
static get DISTANCE_CUTOFF() { return this.NODE_DISTANCE * 8; }
static get SPRING_COEFFICIENT() { return 0.02; }
static get REPULSION_FORCE() { return 4; }

static getRepulsionForce(a, b) {
let f = Vec2d.sub(a.position, b.position),
m = f.mag;
return m > this.DISTANCE_CUTOFF ? f.reset(0, 0) : f.norm().scale(this.REPULSION_FORCE / (m * m));
}
static getSpringForce(a, b) {
let f = Vec2d.sub(a.position, b.position),
m = f.mag;
return f.norm().scale((this.NODE_DISTANCE - m) * this.SPRING_COEFFICIENT);
}

step(dT) {
let t = dT / 4;
// process mutual repulsion
for (let i = 0; i < this.particles.length - 1; i++) {
for (let j = i + 1; j < this.particles.length; j++) {
// mutual deflection force
let a = this.particles[i], b = this.particles[j];
let f = Simulation.getRepulsionForce(a, b);
b.force.sub(f);
}
}
for (let i = 0; i < this.particles.length; i++) {
let a = this.particles[i], b = this.particles[(i + 1) % this.particles.length];
let f = Simulation.getSpringForce(a, b);
b.force.sub(f);
}
// apply movement
this.particles.forEach(particle => {
let f = particle.force.clone().scale(t);
particle.force.reset(0, 0);
});
}
}

// D3 stuff

var container = document.querySelector('#display'),
canvas = d3.select(container)
.append('svg')
.attr({ width: container.offsetWidth, height: container.offsetHeight });

var update = data => {
let w2 = container.offsetWidth / 2, h2 = container.offsetHeight / 2;
let particles = canvas.selectAll('circle').data(data);

x1: d => d.position.x + w2,
y1: d => d.position.y + h2,
x2: (d, idx) => data[(idx + 1) % data.length].position.x + w2,
y2: (d, idx) => data[(idx + 1) % data.length].position.y + h2,
});

// update the particles
particles.enter().append('circle');

particles.attr({
cx: d => d.position.x + w2,
cy: d => d.position.y + h2,
r: 3
});

particles.exit().remove();
};

// set up the initial world, just start with a circle of 40 particles
var simulation = (() => {
let n = 40, particles = [], r = 40;
for (let a = 0; a < 2 * Math.PI; a += 2 * Math.PI / n) {
particles.push(
new Particle(
new Vec2d(
Math.cos(a) * r,
Math.sin(a) * r
)
)
);
}
return new Simulation(particles);
})();

// loop stuff
var lastTime = null, lastGenerated = null;

var tick = timestamp => {
if (!lastTime) lastTime = timestamp;
let elapsed = clamp(0, 16, timestamp - lastTime);
lastTime = timestamp;

simulation.step(elapsed);
update(simulation.particles);

if (!lastGenerated) lastGenerated = timestamp;
// generate a new particle every 60ms
if (simulation.particles.length < 800 && timestamp - lastGenerated > 60) {
let idx = Math.floor(Math.random() * simulation.particles.length),
nextIdx = (idx + 1) % simulation.particles.length,
a = simulation.particles[idx],
b = simulation.particles[nextIdx];
simulation.particles.splice(
idx,
0,
new Particle(
)
);
lastGenerated = timestamp;
}

requestAnimationFrame(tick);
};

requestAnimationFrame(tick);
``````

### External CSS

This Pen doesn't use any external CSS resources.