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
- Responsive Separator for Horizontal List Modern CSS solves a very old design pattern with a few lines of code.
- Wiggly/Wavy Input Range Slider Say goodbye to the boring straight range slider and say hello to the fancy wiggly range slider.
- 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.