Draw Animated Lines Connecting Elements - jQuery Bezier.js

File Size: 5.66 KB
Views Total: 8827
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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" 
<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.




4. Customize the appearance of the bezier curves.

  strokeColor : '#999',
  strokeWidth : 2,
  opacity : 1,
  fill : 'none'

5. Customize the animation of the bezier curves.

  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.