🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

JnLine.js is a funny jQuery plugin for generating random customizable SVG lines with fade in & fade out animations on the web page.

SVG

Documentation

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

You May Also Like