Анимированные SVG-линии

Установка:

Добавляем на сайт библиотеку jQuery и скрипт ckLine.js

Создаем SVG элемент:

<svg id="ckLine" xmlns="http://www.w3.org/2000/svg"></svg>

1	<svg id="ckLine" xmlns="http://www.w3.org/2000/svg"></svg>

И подключаем к нему функцию:

$('#ckLine').ckLine();

1	$('#ckLine').ckLine();

Или с настройками как в примере ниже:

$('#ckLine').ckLine({
	leftRight: false,
	strokeColor: '#FFF',
	interval: 800,
	animateTime: 1600,
	lifeTime: 3000,
	strokeWidth: 3
});

$('#ckLine').ckLine({

leftRight: false,

strokeColor: '#FFF',

interval: 800,

animateTime: 1600,

lifeTime: 3000,

strokeWidth: 3

});

Название	Тип	По умолчанию	Описание
svgId	string	null	svg ID
width	number	SvgWidth	Ширина svg
height	number	SvgHeight	Высота svg
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>]	Массив временных диапазонов

ckLine.js на github.com