Author: | georgedoescode |
---|---|
Views Total: | 1,039 views |
Official Page: | Go to website |
Last Update: | October 28, 2020 |
License: | MIT |
Preview:

Description:
Squircley.js is a JavaScript library (ES 6) that allows developers to generate customizable squircles (superellipses) as SVG, base 64, or background images.
Useful in creating beautiful organic shapes for logos, icons, and background images.
How to use it:
1. Import the Squircley.js as an ES module.
import { // core createSquircle, // squircle background image squircleBackground } from './src/squircley.js';
2. Create an SVG based squircle and customize the shape with the following options:
- curvature: Curvature
- fill: Fill color
- rotate: Rotation angle
const squircleSVG = createSquircle({ format: 'SVGNode', curvature: 0.5, fill: '#4C3EF7', rotate: 0, width: 200, height: 200 });
3. Generate a base64 encoded squircle and append it to an image.
const target = document.querySelector('img'); const squircleBase64 = createSquircle({ format: 'base64', // options here }); target.src = squircleBase64;
4. Generate a URL-encoded background image.
const squircleBackgroundImage = createSquircle({ format: "backgroundImage", // options here }); // apply the background image to an element document.documentElement.style.setProperty( "--svg-squircle", squircleBackgroundImage ); // or document.body.style.backgroundImage = squircleBackgroundImage;
5. Or directly use the squircleBackground
module.
squircleBackground('.squircle-background', { // options here });
Changelog:
v1.1.0 (10/28/2020)
- added height and width options.