Draw Animated Lines Connecting Elements - jQuery Bezier.js

The Bezier.js jQuery plugin dynamically generates smooth, animated, responsive, SVG based bezier curves to reveal the relationship between two elements.

See Also:

• jQuery Plugin To Connect Two Html Elements with A Line
• Draw Dynamic Lines Between Two Lists - jQuery FieldsLinker
• Draw SVG Paths Between Two Elements – leader-line
• Draw Directional SVG Paths Between Elements – svgDynamicDirectionalPath.js
• jQuery Plugin To Connect HTML Elements with Lines - HTML SVG Connect
• Add Connecting Lines Between Block Elements - Connections
• jQuery plugin To Visualize Connections Between Elements - jqSimpleConnect

How to use it:

1. To get started, include the bezier.js script after the latest jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script type="text/javascript"></script>

2. Set the relationship between elements using CSS ID and Class as follows:

<div id="s1" class="element">Supply 1</div>
<div id="s2" class="element">Supply 2</div>
<div id="s3" class="element">Supply 3</div>

<div class="s1 s2">Building 1</div>
<div class="s2">Building 2</div>
<div class="s1 s3">Building 3</div>

3. Call the plugin to draw the bezier curves between these elements.

$(function(){

  $('.element').bezier();

});

4. Customize the appearance of the bezier curves.

$('.element').bezier({
  strokeColor : '#999',
  strokeWidth : 2,
  opacity : 1,
  fill : 'none'
});

5. Customize the animation of the bezier curves.

$('.element').bezier({
  animate : true,
  animationDirection : 'right',
  animationDuration : 0.75
});

---

This awesome jQuery plugin is developed by delboy1978uk. For more Advanced Usages, please check the demo page or visit the official website.