EN 
Українська
Polski
Español
Deutsch
日本語
Italiano
Português (BR)
Français
العربية
Nederlands
中文
한국어
हिन्दी
Türkçe
Tiếng Việt
Русский
Bahasa Indonesia
فارسی
বাংলা
ไทย
Filipino
Kiswahili
اردو
Bahasa Melayu
தமிழ்
עברית
Ελληνικά
ਪੰਜਾਬੀ
አማርኛ
မြန်မာဘာသာ
ខ្មែរ
ქართული
नेपाली
Монгол хэл
Հայերեն
සිංහල
ລາວ
Čeština
Română
Magyar
Български
Svenska
Dansk
Suomi
Norsk
Slovenčina
Hrvatski
Српски
Slovenščina
Lietuvių
Latviešu
Eesti
Íslenska
Shqip
Македонски
Bosanski
Malti🕸️ Spider Web Construction
Watch an orb-weaver build a web step by step: bridge thread, frame, radii from the hub, then an outward capture spiral — the same sequence real spiders follow.
How it Works
The simulation reproduces the four-stage build sequence of a real orb-weaver. First a single bridge thread is walked across the top of the canvas — the anchor line every later thread ultimately depends on. Next, frame threads drop from points on the bridge to several anchor points placed around the canvas and are connected in order into a closed outer polygon, forming the taut boundary of the web. From the polygon's centroid (the hub), radii are drawn one at a time out to the frame at evenly spaced angles, giving the web its spoke structure. Finally a capture spiral winds outward from the hub, its radius growing a little with every pass so that the spacing between turns matches the spiral-spacing slider, stopping just short of the frame.
A small spider dot walks along whichever thread is currently being laid, so you can watch construction happen point by point rather than all at once. Every segment — bridge, frame, radius or spiral turn — is drawn with a slight downward bow at its midpoint rather than as a straight line, approximating the shallow catenary sag real silk shows when it hangs under its own tension between two anchors.
Radius i endpoint: (hub.x + r_frame(θ_i)·cos θ_i, hub.y + r_frame(θ_i)·sin θ_i), θ_i = 2πi / radiiCount
Spiral growth: r(θ) += spiralSpacing / radiiCount per angular step of 2π/radiiCount
Sag: midpoint.y += sagAmount · min(1, length/120), drawn via quadraticCurveTo
Frequently Asked Questions
What order does a real orb-weaver build its web in?
A real orb-weaver first floats or carries a single bridge thread across the gap it wants to span, then drops and walks frame threads to form the outer boundary, then lays radii (spokes) from a central hub out to the frame, and finally spins a spiral of capture silk from the hub outward to the edge, exactly the four-stage sequence this simulation animates.
Why does the bridge thread come first?
The bridge thread is the only piece of silk that spans open space with nothing else to anchor to, so it has to exist before any other thread; every later frame line, radius and spiral turn is attached back to it or to the anchors it leads to.
What do the frame threads do?
Frame threads run from the bridge down to several anchor points and connect those anchors into a closed outer polygon, creating a taut boundary that holds tension so the radii and spiral inside it can be pulled tight without sagging loose.
Why does the capture spiral wind outward from the hub?
This simulation lays a single capture spiral directly from the hub out to the frame, winding around and gaining radius with every pass. Real spiders actually spin a temporary non-sticky auxiliary spiral outward first for scaffolding, then lay the sticky capture spiral from the outside back in while removing the auxiliary line, but the outward hub-to-frame winding shown here captures the same expanding-radius geometry.
What causes the visible sag in each thread?
Silk is an elastic line anchored only at its two ends, so under its own tension it settles into a shallow catenary-like curve rather than a perfectly straight line; the sag amount slider exaggerates this by bowing every drawn segment's midpoint downward.
About this simulation
A tiny spider dot walks out every single thread in the order a real orb-weaver would lay it — bridge first, then frame, then spokes, then spiral — so rather than seeing a finished web appear all at once, you watch the same four-stage construction sequence spiders have used for roughly 200 million years unfold thread by sagging thread.
🔬 What it shows
The complete orb-weaver build sequence — bridge thread, frame polygon, evenly spaced radii from a central hub, and an outward-winding capture spiral — with every silk line drawn with a light gravitational sag.
🎮 How to use
Adjust Radii Count, Spiral Spacing, Frame Anchor Count and Thread Sag before or during a build, use Build Speed to slow down or fast-forward, and press P/R to pause or restart the whole sequence.
💡 Did you know?
An orb-weaver can build an entire web in under an hour, and many species dismantle and eat their own web every morning to recycle the silk proteins before spinning a fresh one at dusk.
Frequently asked questions
What order does a real orb-weaver build its web in?
A real orb-weaver first floats or carries a single bridge thread across the gap it wants to span, then drops and walks frame threads to form the outer boundary, then lays radii (spokes) from a central hub out to the frame, and finally spins a spiral of capture silk from the hub outward to the edge, exactly the four-stage sequence this simulation animates.
Why does the bridge thread come first?
The bridge thread is the only piece of silk that spans open space with nothing else to anchor to, so it has to exist before any other thread; every later frame line, radius and spiral turn is attached back to it or to the anchors it leads to.
What do the frame threads do?
Frame threads run from the bridge down to several anchor points and connect those anchors into a closed outer polygon, creating a taut boundary that holds tension so the radii and spiral inside it can be pulled tight without sagging loose.
Why does the capture spiral wind outward from the hub?
This simulation lays a single capture spiral directly from the hub out to the frame, winding around and gaining radius with every pass. Real spiders actually spin a temporary non-sticky auxiliary spiral outward first for scaffolding, then lay the sticky capture spiral from the outside back in while removing the auxiliary line, but the outward hub-to-frame winding shown here captures the same expanding-radius geometry.
What causes the visible sag in each thread?
Silk is an elastic line anchored only at its two ends, so under its own tension it settles into a shallow catenary-like curve rather than a perfectly straight line; the sag amount slider exaggerates this by bowing every drawn segment's midpoint downward.
Watch an orb-weaver build a web step by step: bridge thread, frame, radii from the hub, then an outward capture spiral — the same sequence real spiders follow.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install