ckLine.js
Generates random svg Lines You can find a demo here https://www.jqueryscript.net/animation/Animated-SVG-Lines-jQuery-JnLine.html
Installation
Download package and include jquery.ckLine.min.js
in your document after including jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="/path/to/jquery.ckLine.min.js"></script>
Usage
You need an empty SVG Element in your HTML
<svg id="ckLine" xmlns="http://www.w3.org/2000/svg"></svg>
Via JavaScript
To call the ckLine plugin, select your target element with jQuery and do the following:
$('#ckLine').ckLine();
Options
Name | type | default |
---|---|---|
svgId | string | null |
width | number | SvgWidth |
height | number | SvgHeight |
strokeColor | string | #000 |
strokeWidth | number | 2 |
animateTime | number | 1000 |
interval | number | 600 |
fadeOut | number | 800 |
lifeTime | number | 2000 |
easing | string | swing |
leftRight | boolean | true |
animationTimeRange | array | [<number>, <number>] |
Functions
To Destroy the plugin
$('#ckLine').ckLine.destroy();