yurkoturskiy / primitivo-svg

JS library for SVG. Generate and animate 2d shapes.

Primitivo-SVG (Alpha) - JavaScript library for SVG

Primitivo is a JavaScript library for SVG. That means it prepares data for the SVG and doesn't manipulate the DOM. Think about it as the SVG assistant. With it, you can create spinners, transitions effects, or elements for illustrations.

What makes it unique

1. Morph paths via animate tag;
2. Powerful timing and spacing controls;
3. Phased animation;
4. Animate with SSR and turned off JS (except for interactive cases).

Examples:

CodeSandboxes:

1. Sequence of polygons
2. Smart round
3. Noise of distance
4. Phased transition
5. Blobby Spinner

Collections of examples:

• Project on Dribbble: https://dribbble.com/Guandjoy/projects/1539697-Primitivo-SVG
• Article on Dev.to: https://dev.to/guandjoy/primitivo-the-js-library-for-svg-set-of-examples-27g6

Collections of design concepts:

1. Dribbble: https://dribbble.com/Guandjoy/buckets/1504217-primitivo
2. Pinterest: https://www.pinterest.com/yurko_turskiy/primitivo/

Buy me a coffee ☕

Coffee will help me to develop Primitivo faster.

Bitcoin wallet: 19fxW81ApuCbAu2tW8WebxRQqaoje6YbhJ

Install:

npm install --save primitivo-svg

Backlog:

1. Corners rounding and smoothing

Path Layer

Draw a figure

base parameters:

Name	Description
numOfSegments?: number;
depth?: number;
x?: number;
y?: number;
width?: number;
height?: number;
centerX?: number;
centerY?: number;
rotate?: number;
numOfGroups?: number;
groups?: GroupParameters[];

Group Parameters

Name	Description
type	linear or radial
incircle
distance
round
smartRound	Able to create perfect circle from a polygon with custom radians
lengthBasedRound	The longer distance from center the bigger round factor is
adaptArms	Keep arms always perpendicular to center
radius
radians	Custom radians for each point of a group

Morping Layer

Draw a sequence of paths

parameters:

Name	Description
numOfKeyPaths	Number of key paths (frames)
loop	Loop the animation

keyPathsParameters:

Name	Description
numOfSegments	Number of segments of the path frame
depth	Pow the number of segments
x	X coordinate of the top left corner
y	Y coordinate of the top left corner
width	The width of the frame
height	The height of the frame
centerX	X coordinate of the center point
centerY	Y coordinate of the center point
rotate	Rotate the figure
numOfGroups	Limit the number of groups
groups:	Array of groups settings
- type	Linear of radial
- distance	Distance from center
- round	Value of the round strength
- incircle	Keep points in circle's boundaries

Spacing Layer

Calculate keySplines for a defined timing and spacing.

Phases Layer

Make complex sequence of paths based on input parameters

Parameters:

Name	Description
numOfSegments	Number of segments of the path frame
depth	Pow the number of segments
x	X coordinate of the top left corner
y	Y coordinate of the top left corner
width	The width of the frame
height	The height of the frame
centerX	X coordinate of the center point
centerY	Y coordinate of the center point
rotate	Rotate the figure
numOfGroups	Limit the number of groups