Bending a Straight Line using Modern CSS
Updating the previous implementation with another idea of connection. This time, it's a straight line that adjusts based on the distance between the two circles. It bends when they get closer and stretches (becomes thinner) when they get farther. Implementing physics using pure CSS!
Another demo powered by modern CSS (Anchor Positioning, border-shape, if(), and more).
Drag the circles and see the magic in play!
⚠️ Chrome-only for now ⚠️
See the Pen Bending a straight line using pure CSS by Temani Afif (@t_afif) on CodePen.
You can have as many elements as you want and adjust the connection setting (line length and number of curves)
See the Pen Bending a straight line using pure CSS II by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- Three Shape Variations using border-shape Use border-shape to create any shape, its border-only and cutout variations.
- An Interactive Image Slider/Carousel Using modern CSS to create a responsive image slider with speed control.