floating-colors v1.1.0
JavaScript library for creating floating colors on the background of clipped shapes inside SVG-image.
Adds more colors into your life even if you don't want to.
Show me example!
Usage
Install
npm install floating-colors --saveImport
As module in modern web-project
import FloatingColors from 'floating-colors';As global variable window.FloatingColors
<script src="dist/floating-colors.min.js"></script>Creating clipPath in SVG-image
Place shapes that should have floating colors in the background into clipPath tag.
NB! Be careful making this step - not all tags can be placed into clipPath tag.
This is the reason why this step is manual.
Example before:
<svg id="svg" viewBox="0 0 300 300">
<path d="..." />
<circle r="150" cx="150" cy="150" />
</svg>Example after:
<svg id="svg" viewBox="0 0 300 300">
<defs>
<clipPath id="clipPath">
<path d="..." />
<circle r="150" cx="150" cy="150" />
</clipPath>
</defs>
</svg>Code
import FloatingColors from 'floating-colors';
// Initialization
const options = { /* custom settings */ };
const floatingColors = new FloatingColors(options);
// Attaching to SVG
const svg = document.getElementById('svg');
floatingColors.attachTo(svg);
// Some code ...
// Playing animation when everything is ready
floatingColors.play();
// Some code ...
// Pausing/toggling/stopping animation
floatingColors.pause();
floatingColors.toggle();
floatingColors.stop();
// Some code ...
// Releasing resources in the end
floatingColors.detach();
Options
| Name | Value | Description |
|---|---|---|
playIntro | bool = true | Enable/disable intro animation. |
playIntroFrom | string = 'left' | Colors appears from left/top/right/bottom side. |
backgroundColor | string = null | Background of intro animation. |
colors | string[] = [...] | Colors that will float during animation. |
gridSettings | object = {...} | Setting for grid. |
showPalette | bool = false | Enable/disable visual debugging of colors in the grid. |
containerId | string = null | Id of element in svg that will contains the grid (null === svg). |
insertionMethod | string = 'append' | append or prepend the grid into the container. |
clipPathId | string = null | Id of clipPath that will be used on the grid (null === first in svg). |
animationDelay | number = 0 | Delay in milliseconds. Negative value means offset in time. |
animationDuration | number = 60 000 | How much time in milliseconds takes one cycle of animation. |
How does it work?
- On
attachTo(svg)the library will create background as a grid of color-gradients. - On
play()created background will be translated along animation path.
Grid
The image below shows grid that created based on the default gridSettings option.
Color gradients are placed into vertices of regular rectangles that created based on gridSettings:
| Name | Value | Description |
|---|---|---|
colorsInLine | number = 5 | How many colors in one line. |
numberOfLines | number = 5 | How many lines in the grid. |
colorRadius | number = 1.35 | Radius of circled gradient. |
columnWidth | number = 1 | Column width (length of side of triangle). |
NB! colorRadius and columnWidth uses as number * max(svg.width, svg.height).
Animation
Animation will follow next scheme when playIntroFrom is left:
- square is SVG-image;
- dashed line is animation path;
- left rectangle is background of into animation;
- right rectangle is grid of colors.
Intro-animation follows straight line. Cycle-animation follows circle.