JnLine.js
Generates random svg Lines
Installation
Download package and include jquery.jnLine.min.js in your document after including jQuery.
You can use NPM
npm install jnline<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/path/to/jquery.jnLine.min.js"></script>Usage
You need an empty SVG Element in your HTML
<svg id="jnLine" xmlns="http://www.w3.org/2000/svg"></svg>Via JavaScript
To call the jnLine plugin, select your target element with jQuery and do the following:
$('#jnLine').jnLine();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>, <number>] |
Functions
To Destroy the plugin
$('#jnLine').jnLine.destroy();