Customizable Squircle Generator In JavaScript – Squircley.js

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

Preview:

Customizable Squircle Generator In JavaScript – Squircley.js

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.

You Might Be Interested In:


Leave a Reply