border-radius: 50%;
width: 80px;
height: 80px;
background: #C1694F;
CSS clip-path defines visible regions of an element using geometric shapes. By combining ellipse(), polygon(), and SVG path() data, we sculpt organic silhouettes from rectangular elements — creating the illusion that digital containers are living, pressurized forms growing across the viewport.
.blob {
clip-path: ellipse(
45% 42% at 52% 48%
);
background: radial-gradient(
ellipse at 30% 40%,
#D4A574, #C1694F
);
}
clip-path: ellipse(48% 44% at 50% 50%);
clip-path: ellipse(45% 42% at 52% 48%);
mix-blend-mode: multiply;
clip-path polygons — By defining vertex coordinates as percentage pairs, polygon() carves any silhouette from an element. Points flow clockwise. Odd shapes emerge from unexpected coordinate sequences, like mutations in digital DNA.
border-radius manipulation — The 8-value syntax (a b c d / e f g h) creates asymmetric organic curves. Each value controls a different corner's horizontal and vertical radius independently, producing amoeba-like outlines from a single CSS property.
SVG morphing — SVG <path> data can be interpolated between two compatible d-attributes, making one shape flow smoothly into another. The organic transition mirrors biological growth sequences.
mix-blend-mode — When overlapping blobs use multiply, their colors combine like layered glazes in ceramics. The intersection zone becomes richer and denser, creating depth from overlap alone.
filter effects — SVG filters like feTurbulence add grain texture, while feGaussianBlur and feDisplacementMap create organic warping. Layer these for ceramic or biological surface qualities.
clip-path: polygon(
5% 15%, 25% 2%, 65% 0%,
90% 20%, 95% 60%, 78% 95%,
40% 100%, 8% 80%
);
border-radius: 30% 70% 70% 30%
/ 30% 30% 70% 70%;
filter: url(#noise-filter);
Compound forms emerge when adjacent blobs merge their boundaries. Using identical fills and carefully aligned clip-path edges, separate elements fuse into a single perceived shape — a union operation achieved through visual overlap rather than geometric computation.
The superformula equation generates an infinite family of organic shapes through six parameters: r(φ) = (|cos(mφ/4)/a|^n2 + |sin(mφ/4)/b|^n3)^(-1/n1). By varying m, n1, n2, n3 we traverse the morphospace from circles to starfish to amoebas — a mathematical taxonomy of biological form.
// Metaball field function
function metaball(x, y, balls) {
let sum = 0;
for (const b of balls) {
const dx = x - b.x;
const dy = y - b.y;
sum += b.r * b.r
/ (dx*dx + dy*dy);
}
return sum;
}
// Threshold > 1.0 = inside blob
/* Visual union via overlap */
clip-path: path('M...');
background: #C1694F;
/* Superformula params */
m=6, a=1, b=1
n1=1, n2=7, n3=8
Every shape on this page is alive — inflated by CSS, textured by SVG filters, positioned by the broken-grid system. Together they form a digital ecosystem: organisms of code coexisting in shared space, their overlapping edges creating emergent complexity from simple rules.
.ecosystem .blob:nth-child(n) {
clip-path: ellipse(
calc(35% + var(--i) * 3%)
calc(40% + var(--i) * 2%)
at 50% 50%
);
}
The annotation layer maps the genetic code of each organism — CSS properties rendered as field notes, SVG lines tracing evolutionary lineage between parent and child forms.
// Spring physics
const spring = (target, current, velocity) => {
const k = 0.08; // stiffness
const d = 0.72; // damping
const force = k * (target - current);
return velocity * d + force;
};
Particles drift like spores — each one a pixel-scale echo of the macroscopic forms below. The same radial gradients, the same terracotta warmth, scaled down to dust-mote resolution.
The beauty of organic computation lies in this paradox: rigid instructions produce fluid forms. Every curve you see is built from numbers, every gradient from math. The blobs breathe because the code tells them to. And in this convergence of craft and calculation, we find something genuinely alive.
/* Generative placement */
grid-column: span calc(2 + var(--i));
grid-row: span calc(2 + var(--j));
animation: elasticEnter 0.8s
cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Particle config */
count: 40, size: 3-8px
opacity: 0.15-0.4
drift: 0.2-0.8px/frame