lit-squircle v0.0.3

Squircle, the Web Component implementation

This is an implementation of Squircle, build on top of figma-squircle.

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 directly.

Usage

For pure HTML, you just import the lit-squircle.js in the HTML head, then:

<x-squircle radius="32">
    <a href="#">Menu 1</a>
    <a href="#">Menu 2</a>
    <a href="#">Menu 3</a>
    <a href="#">Menu 4</a>
</x-squircle>

Examples

Check the index.html file.