0.1.1-alpha.1 • Published 4 years ago
primitivo-svg v0.1.1-alpha.1
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
- Morph paths via animate tag;
- Powerful timing and spacing controls;
- Phased animation;
- Animate with SSR and turned off JS (except for interactive cases).
Examples:
CodeSandboxes:
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:
- Dribbble: https://dribbble.com/Guandjoy/buckets/1504217-primitivo
- Pinterest: https://www.pinterest.com/yurko_turskiy/primitivo/
Buy me a coffee :coffee:
Coffee will help me to develop Primitivo faster.
Bitcoin wallet: 19fxW81ApuCbAu2tW8WebxRQqaoje6YbhJ
Install:
npm install --save primitivo-svgBacklog:
- 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 |
0.1.1-alpha.1
4 years ago
0.1.1-alpha.0
4 years ago
0.1.0-alpha.2
4 years ago
0.1.0-alpha.1
4 years ago
0.1.0-alpha.0
5 years ago
0.1.0-beta.0
5 years ago