Eight : Procedural Spider with Inverse Kinematics

Live and interactive at romanjahandideh.com. Try it.

This is a fully procedural spider built in SVG using D3, not an animation, not a sprite, not a looping sequence. Every leg position on every frame is solved fresh using inverse kinematics, biomechanical joint limits, and web thread snapping. The spider behaves, rather than plays back.
The body is a draggable node. When you move it, each of the spider's legs responds independently. Each leg is a two bone chain: an upper segment from the body to the knee, and a lower segment from the knee to the foot. The knee position is solved geometrically using the law of cosines every frame. Given the body position and the planted foot, the system finds the exact knee joint that satisfies both segment lengths and bends to the correct side. This is the same technique used in professional 3D character animation rigs.
Feet are not placed freely. Each foot must snap to an actual thread intersection on the spiderweb underneath. The system queries the live web geometry every step, finds the nearest valid strand midpoint within snapping range, checks that the knee angle at that position would be within the biological limit, checks that the reach does not exceed the sum of both bone lengths, checks angular separation from every other planted foot, and checks minimum spacing between all nodes. If a candidate fails any of these tests it is discarded and the system tries again, up to 70 attempts per step. Only a position that passes every constraint gets accepted.
Stepping is autonomous and continuous. Each frame the system scans all legs in round robin order and checks whether any foot has drifted too far from the body, too close to the body, or into a knee angle that exceeds the joint limit. Whichever leg fails the check first takes a step, interpolating smoothly to its new target over 140 milliseconds with an eased curve, then pausing for a cooldown before the next step is allowed. The result is a gait that feels natural because it is governed by the same constraints that govern real spider movement. Legs step when they reach their limit, not on a fixed timer.
When a foot plants on the web, it plucks the silk beneath it. The disturbance call sends a radial impulse into the web physics system at the landing point, briefly illuminating the nearby threads and making the web respond to the spider's weight. Between steps, all planted feet continuously emit a smaller persistent vibration into the web, a low level tremor that keeps the threads around the spider gently active, as if something heavy is resting on them.
When you drag the body node, the spider follows. Feet that get overstretched during the drag are hard clamped back to the maximum bone reach and re snapped to the nearest strand. Dragging also plucks the web continuously at a throttled rate, leaving a trail of disturbed silk behind the spider's path.
The body node glows when it is near a web strand. Proximity is measured every frame against the live web geometry, and a CSS drop shadow is scaled with distance and falloff. The closer the spider sits to a thread, the brighter its glow. This makes the spider feel embedded in the web rather than floating above it.
An idle tremor runs at 30fps via a D3 timer, adding seeded sinusoidal micro jitter to each node. The body and legs sway very slightly even when nothing is being dragged, keeping the whole system alive during stillness.
You can interact with the spider live on my portfolio. Visit romanjahandideh.com and navigate to the Work section.
Stack: D3.js · SVG · Vanilla JavaScript
Techniques: Two bone inverse kinematics · Law of cosines joint solver · Web thread foot snapping · Autonomous round robin stepping gait · Biomechanical reach and knee angle constraints · Impulse based web plucking on plant · Proximity glow · Seeded idle tremor · Drag with continuous web disturbance