Press "Enter" to skip to content

[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

Squircley.js can create SVG, add square backgrounds to DOM elements, and even create nested strings encoded with base64 ready to use with IMG tags.

Note: squircley.js is now just an ES module. I will add UMD support etc if people need it in the future I didn’t want to get lost in spin land early 🙏

How to make use of it:

1. Import the Squircley.js as an ES module.

import { 
  // core
  // squircle background image
} from './src/squircley.js';

2. Create an SVG primarily based squircle and customize the form with the next options:

const squircleSVG = createSquircle({
      format: 'SVGNode',
      curvature: 0.5,
      fill: '#4C3EF7',
      rotate: 0

3. Generate a base64 encoded squircle and append it to a picture.

const target = document.querySelector('img');
const squircleBase64 = createSquircle({
      format: 'base64',
      // options here
target.src = squircleBase64;

4. Generate a URL-encoded background picture.

const squircleBackgroundImage = createSquircle({
      format: "backgroundImage",
      // options here
// apply the background image to an element
// or = squircleBackgroundImage;

5. Or instantly use the squircleBackground module.

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

Customizable Squircle Generator In JavaScript, Squircley JS Plugin/Github

See Demo And Download

Official Website(georgedoescode): Click Here

This superior jQuery/javascript plugin is developed by georgedoescode. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.