Customizable Squircle Generator In JavaScript – Squircley.js

Category: Image , Javascript | October 28, 2020
Views Total:922 views
Official Page:Go to website
Last Update:October 28, 2020


Customizable Squircle Generator In JavaScript – Squircley.js


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
  // squircle background image
} 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
// or = squircleBackgroundImage;

5. Or directly use the squircleBackground module.

squircleBackground('.squircle-background', {
  // options here


v1.1.0 (10/28/2020)

  • added height and width options.

You Might Be Interested In:

Leave a Reply