Svelte Smooth Corners

Svelte component to create a wrapping element with smooth corners rather then relying on radial corners – best practices in design.

To my current knowledge all current browser versions support this package.

Installation

npm install svelte-smooth-corners

Usage

<script>
  import SmoothCorners from "svelte-smooth-corners";
</script>

<SmoothCorners cornerRadius="10" cornerSharpness="9">
  Hello Squircle World!
</SmoothCorners>

Examples

»I need borders, pls help!«

<script>
  import SmoothCorners from "svelte-smooth-corners";
</script>

<style>
.border {
  background: green;
  padding: 5px;
}
</style>

<SmoothCorners cornerRadius="10" cornerSharpness="9">
  <div class="border">
    <SmoothCorners cornerRadius="5" cornerSharpness="9">
      Hello Squircle World!
    </SmoothCorners>
  </div>
</SmoothCorners>

Use the clip path only

In case you need the option to add css to your elements and need the smooth corners you can use the clip path only mode. For that, add clipPathOnly={true} and svg={true} (if you need the svg option – otherwise you have to bind the clipPath component prop to a variable and add it as CSS path to your element) to the <SmoothCorners> component. Then you can access the clip path SVG name via the bound name-prop of the component. Add this SVG path as CSS var to the element and use it as clip-path value.

<script>
  import SmoothCorners from "svelte-smooth-corners";
  
  let w, h, clipPathName
</script>

<style>
.foo {
  clip-path: var(--clipPath);
  -webkit-clip-path: var(--clipPath);
}
</style>

<SmoothCorners clipPathOnly={true} svg={true} w={w} h={h} bind:name={clipPathName} cornerRadius="10" cornerSharpness="9"></SmoothCorners>
<div class="foo" style="--clipPath: url('#{clipPathName}')">
  Hello Squircle World!
</div>