Primitivo-SVG (Alpha) - JavaScript SVG library
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
- Morph paths via animate tag;
- Powerful timing and spacing controls;
- Phased animation;
Examples:
Collections of design concepts:
- Dribbble: https://dribbble.com/Guandjoy/buckets/1504217-primitivo
- Pinterest: https://www.pinterest.com/yurko_turskiy/primitivo/
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 |