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