SVG Sticky Shapes

Drag the circles below close to each other. When they get near, they reach out and stick together. Pull them apart and they stretch, until they snap. This is often called a gooey effect. It looks like it needs a physics engine, but here it is plain SVG: a few circles and one extra path between each pair.

The trick is that there is no real goo. The circles never change shape. Between every two circles that are close enough, we draw one more shape in the same color: a bridge. Because the colors match, your eye sees the circles and the bridge as one piece. Paint the bridge in another color to see it.

So the whole job is drawing that bridge. Like a rope between two posts, it needs places to attach. We pick four points: a and d on the first circle, b and c on the second. To find them, we look along the line from one center to the other, and step a little to each side of it, on the sides where the circles face each other.

Joining the points with straight lines gives a shape that touches both circles, but it looks stiff, like a box glued between them. Goo curves inward. For that we use the C command of SVG paths, which draws a curve. C takes two handles and an end point. The curve does not pass through the handles; it leaves toward the first one and arrives from the direction of the second one, as if they were pulling on it. Switch between the two versions and drag the circles.

M 158,97 C 174,128 233,143 256,116 L 250,166 C 234,135 173,137 151,164 Z

The path below the picture is the whole bridge. M moves to a, C curves to b, L draws a straight line to c, the second C curves back to d, and Z closes the shape with a straight line back to a. The two straight lines run through the inside of the circles, so nobody ever sees them. If M, L and Z are new to you, the SVG Path Commands article explains them.

Each handle points along the edge of its circle, toward the other circle. That is why the curves leave the circles smoothly, without a corner.

Now the part that makes it feel sticky. When the circles move apart, the bridge should stretch: its thinnest part, the neck, gets thinner. We do that with the handles. Longer handles pull both curves deeper toward the middle, so the neck gets thinner. The points also slide a little closer together, so the bridge gets narrower at its ends too. And when the gap between the circles gets bigger than a limit we choose, the snap distance, we stop drawing the bridge.

Try a small snap distance and a large one. A small one feels like two drops of water that barely touch. A large one feels more like chewing gum. When the circles overlap, the same bridge still helps: it fills the sharp dent where the two edges cross, so they melt into one smooth blob.

There is another popular way to get this look, with almost no math: an SVG filter. First the browser blurs the shapes, so shapes that are close melt into one soft cloud. Then a color matrix makes the soft edges hard again: pixels that are mostly see-through disappear, and the rest become solid. Compare the two ways.

The filter works with any shape and takes only a few lines. In return, edges get a little soft, sharp corners get rounded, and the browser has to blur the picture again every time something moves, which usually costs more than drawing one more path. The bridge path keeps edges sharp and gives you full control, but only for the shapes you wrote the math for. Here, that means circles.

So a sticky shape is not one shape at all. It is a few ordinary shapes and a bridge in the same color. Four points tell the bridge where to attach, handles bend it, and a snap distance decides when it lets go. Once you see it this way, you can build the same effect for other shapes too: find where they face each other and join them with curves.

@aykutkardas

—

0/50 claps