[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 Squircley.js as an ES module.

import { 
  // core
  createSquircle, 
  // squircle background image
  squircleBackground 
} 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
document.documentElement.style.setProperty(
  "--svg-squircle",
  squircleBackgroundImage
);
// or
document.body.style.backgroundImage = 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 usage, please go to the official website.

Related Posts

Simple-and-Modern-Multi-Level-Sidebar-Menu-on-Bootstrap-4

[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level,…

vanilla-js-carousel

Flip Sliding Carousel Gallery Made Of CSS And Vanilla JS

Vanilla JS Carousel is a JavaScript Slider plugin for navigating objects in a 3D space just like Cover Flow. Getting started Clone or download the repo. Open…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…