DEFAULT_FILE_NAME
The default filename when attempting to download.
DEFAULT_FILE_NAME
Type:
string
DASH_ARRAY
Constants purely to prevent magic numbers.
DASH_ARRAY
Type:
{LENGTH: number, GAP: number}
Veczor
A tool to create super-cool vector interactivity.
Parameters
svg ((SVGElement | string))
A string representation of an SVG file, or an
actual SVGElement.
Static Members
Load an SVG file.
Parameters
path (string)
Path that leads to the SVG file to load.
Returns
Promise<string>:
Remove the viewBox attribute from the svg in order to prevent the visuals from
being cut off.The viewBox basically acts like a big compound path.
Parameters
svg ((SVGElement | string))
A string representation of an SVG file, or an
actual SVGElement.
Returns
(SVGElement | string):
▸
getSVGChildElements(svgElement)
getSVGChildElements(svgElement: paper.Item):
Array<paper.Item>
Parameters
svgElement (paper.Item)
The parent
Returns
Array<paper.Item>:
▸
createNeonColor(start, end, startRange, endRange)
Create a gradient stroke.
Parameters
start (number)
The Y position of where the gradient should start.
end (number)
The Y position of where the gradient should end.
Returns
{gradient: {stops: Array<string>}, origin: Array<any>, destination: Array<number>}:
Example
Veczor.createNeonColor(0, window.innerHeight);
Instance Members
Main update method. Hook this up to your own animation loop!
update()
Scale the SVG to match the canvas size.
Parameters
padding (number
= 0)
Whitespace between the edge of the canvas and the SVG in pixels.
Example
Common scenario
const {width, height} = canvas;
const padding = width > height ? height / 8 : width / 8;
Veczor.fit(padding);
Center the main SVG element to the center of the view.
center()
Example
Common scenario
window.addEventListener('resize', MyVeczorInstance.center());
Shuffle all vector Vector2D points around (positional).
Parameters
amount (number)
The maximum distortion amplitude in pixels.
Export the current view as a SVG file.
Calling this will open the OS' file-system downloads prompt.
exportToFile(fileName:
string)
Parameters
fileName (string
= DEFAULT_FILE_NAME)
The current velocity.
velocity
Returns
number:
Adjust the velocity.
velocity
Parameters
Gets whether the elements are following the position.
followPointer
Returns
boolean:
Set's the position follow.
followPointer
Parameters
Get the position of the SVG.
position
Returns
{x: number, y: number}:
position
Parameters
| Name |
Description |
param.x any
|
|
param.y any
|
|
svg
Parameters
svg ((SVGElement | string | paper.Item))
A string representation of an SVG file, or an
actual SVGElement.
Returns the currently rendered colour.
color
Returns
(string | paper.Color):
Set the colour of the subject.
color
Parameters
color ((string | paper.Color))
Returns the current dash gap.
dashGap
Returns
number:
Set a dash gap on the svg elements.
dashGap
Parameters
Returns the current dash gap.
dashLength
Returns
number:
Set a dash gap on the svg elements.
dashLength
Parameters
Returns the currently rendered stroke width.
strokeWidth
Returns
number:
Set the stroke width of the svg elements.
strokeWidth
Parameters
Returns the active blending mode.
blendMode
Returns
string:
Apply a blending mode to the svg.
blendMode
Parameters
blendMode ((paper.Item.blendMode | string))
exportSVG
exportSVG
Type:
string