A Spring Connector Using Anchor Positioning and border-shape
After the low-quality Zig-Zag connector, here is a more robust one: a spring connector. Another fun demo powered by Anchor Positioning and border-shape
Drag the circles and see how the shape behaves. Go wild with this one; it won't break!
⚠️ Chromium-only for now ⚠️
See the Pen Spring connector (drag the circles!) by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- Confetti Shape Explosion using random() We all like confetti, right? A fancy demo powered by modern CSS features.
- Input Range Slider with Custom Shapes Using modern CSS features to apply fancy shapes to native range sliders.