squircley.js
is the core magic of Squirclular ✨ from https://squircley.app
wrapped in a simple 0-dependency JavaScript library.
squircley.js can generate SVG files, add square backgrounds to DOM elements, and even create nested base64-encoded strings ready to use with img
tags.
Note Now squircley.js is just an ES module. I’ll add UMD support etc if people need it in the future, I didn’t want to get lost in the land of a backlog so early 🙏
squircleBackground
Options
squircleBackground
are simply a wrapper around createSquircle
. The options are identical.
Must Read: A Flexible Tabs Component for Vue.js | vue-magic-line
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-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 });
createSquircle
Options
Must Read: JavaScript Library To Automatically Detect And Extract An Image From A Screenshot | MagicCrop
Name | Type | Default | Description |
---|---|---|---|
format | String | SVGNode | The format of the squircle. Accepts SVGNode , backgroundImage , base64 |
viewBox | Array | [0, 0, 200, 200] | SVG view box (x, y, w, h) |
width | Number | 200 | Width of the squircle |
height | Number | 200 | Height of the squircle |
curvature | Number | 0.5 | Value 0 - 1 that determines how round the squircle is |
fill | String | 0.5 | Fill the color of the squircle |
rotate | Number | 0 | Rotation of the squircle |
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.