Customizable Squircle Generator In JavaScript – Squircley.js

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.