Skip to content

Commit aebd4ec

Browse files
Update README.md
1 parent 71d6b2d commit aebd4ec

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,23 @@
1919
- 🐁 Just `2.1kB` gzipped.
2020
- 🧨 Documented usage examples.
2121

22+
### Drawbacks
23+
24+
- Uses JavaScript to apply corner smoothing (no way to do it with CSS only for now).
25+
- Does not currently support `border-width`. Works great with just background color.
26+
27+
## What the 🤡 is a Squircle???
28+
29+
This is a valid question and not everyone is aware of what a Squircle is.
30+
<q>A squircle is an intermediate shape between a square and a circle</q> - [Webflow Blog](https://webflow.com/blog/squircle-vs-rounded-squares).
31+
If you've ever seen an iPhone home screen, you've seen a squircle.
32+
When you add additional corner smoothing to a regular rectangle with rounded corners, you get a squircle.
33+
It's a [long story](https://www.figma.com/blog/desperately-seeking-squircles/), but in short - you can't achieve Squircles in plain CSS, we have to do extra calculations for that, which is where the [figma-squircle](https://github.com/phamfoo/figma-squircle) package comes in. Building on top of that package, this project adds bindings for UI libraries that make it possible to use it just like a regular html component, without worrying about layout-specific things.
34+
35+
Visually, [this post from Figma Blog](https://www.figma.com/blog/desperately-seeking-squircles/) shows the difference really well:
36+
37+
![ezgif-3-e6f18e029e](https://github.com/bring-shrubbery/squircle-js/assets/29360707/e64bacb9-9881-476b-9064-01a72df06a9e)
38+
2239
## Usage
2340

2441
### with React

0 commit comments

Comments
 (0)