Thpace is a pretty canvas creation of mine. It makes a space animation out of triangles.
You can install Thpace through NPM as a module, or through a CDN
yarn add thpace - or - npm install thpace
https://unpkg.com/thpace Will get you the minified build
Then, you can import:
<script src="https://unpkg.com/thpace"></script>import { ThpaceGL } from 'thpace';
// or
const { ThpaceGL } = require('thpace');
// or, if you used the CDN, skip those
const canvas = document.querySelector('#make-me-cool');
const settings = {
colors: ['#4CB1EF', '#424959', '#FF4B44'],
triangleSize: 100,
};
ThpaceGL.create(canvas, settings);| Setting | Accepts | Default | Description |
|---|---|---|---|
triangleSize |
number | 130 |
Triangle size (px) |
bleed |
number | 120 |
Bleed amount over canvas edges (px) |
noise |
number | 60 |
Noise used when calculating points (px) |
colors |
Array<string> | ['rgba(11,135,147,1)', 'rgba(54,0,51,1)'] |
Array of colors to use for the gradient |
pointVariationX |
number | 20 |
How much the points should shift on the x-axis (px) |
pointVariationY |
number | 35 |
How much the points should shift on the y-axis (px) |
pointAnimationSpeed |
number | 7500 |
How fast the points should complete a loop (ms) |
animationOffset |
number | 250 |
Interval on the x-axis for the animation offset (px) |
maxFps |
number | 144 |
Limit how many frames are drawn per second |
automaticResize |
boolean | true |
Set to false to prevent Thpace from reacting to resize events |
particleSettings |
ParticleSettings | {} |
Settings for the particles |
| Setting | Accepts | Default | Description |
|---|---|---|---|
count |
number || [min, max] |
[2, 5] |
How many particles should be generated per 100 pixels |
interval |
number || [min, max] |
[5000, 10000] |
Interval for a particle to complete it's animation (ms) |
radius |
number || [min, max] |
[1, 2] |
Particle radius (px) |
opacity |
number || [min, max] |
[.1, .7] |
Particle opacity |
variationX |
number || [min, max] |
[5, 15] |
Variation in the particle animation on the x-axis (px) |
variationY |
number || [min, max] |
[2.5, 7.5] |
Variation in the particle animation on the y-axis (px) |
color |
string | #ffffff |
Color of the particles |