https://github.com/leechael/lit-squircle
Squircle, the Web Component implementation.
https://github.com/leechael/lit-squircle
lit-element squircle web-components
Last synced: about 2 months ago
JSON representation
Squircle, the Web Component implementation.
- Host: GitHub
- URL: https://github.com/leechael/lit-squircle
- Owner: Leechael
- Created: 2023-10-02T12:46:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-22T09:05:18.000Z (over 2 years ago)
- Last Synced: 2025-06-03T04:09:56.612Z (about 1 year ago)
- Topics: lit-element, squircle, web-components
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/lit-squircle
- Size: 45.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Squircle, the Web Component implementation
This is an implementation of Squircle, build on top of [figma-squircle](https://figma-squircle.vercel.app/).
The good parts of this implementation:
- Build with Lit and export as Web Component, so you can use it in any standard web browser without any JS framework.
- It's a container element and adjusting size dynamically like normal HTML block element. It listen to the resize event, too.
Limitation:
- No border supported. Need further work on the SVG and this is a tiny holiday project.
- No box shadow supported.
- Partial & buggy gradient background supported.
- Package size. not yet optimizing the final artifact size.
## CAUTION!
No yet production ready. If you want a more flexible implementation, consider use
[figma-squircle](https://figma-squircle.vercel.app/) directly.
## Usage
For pure HTML page, put this line in `