Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yurkoturskiy/primitivo-svg
JS library for SVG. Generate and animate 2d shapes.
https://github.com/yurkoturskiy/primitivo-svg
javascript-library svg svg-animations svg-images svg-path
Last synced: 3 months ago
JSON representation
JS library for SVG. Generate and animate 2d shapes.
- Host: GitHub
- URL: https://github.com/yurkoturskiy/primitivo-svg
- Owner: yurkoturskiy
- License: mit
- Created: 2019-07-09T05:00:22.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-11-19T04:17:35.000Z (almost 2 years ago)
- Last Synced: 2024-07-21T18:18:14.888Z (4 months ago)
- Topics: javascript-library, svg, svg-animations, svg-images, svg-path
- Language: TypeScript
- Homepage:
- Size: 663 KB
- Stars: 37
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://codesandbox.io/s/github/guandjoy/sequence-of-polygons)
2. [Smart round](https://codesandbox.io/s/github/guandjoy/smart-round)
3. [Noise of distance](https://codesandbox.io/s/github/guandjoy/noise-of-distance)
4. [Phased transition](https://codesandbox.io/s/github/guandjoy/phased-transition)
5. [Blobby Spinner](https://codesandbox.io/s/github/guandjoy/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:
2. Pinterest:
## Buy me a coffee :coffee:
Coffee will help me to develop Primitivo faster.
Bitcoin wallet: `19fxW81ApuCbAu2tW8WebxRQqaoje6YbhJ`
## Install:
```shell
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 |