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();