Svelte component to create a wrapping element with smooth corners rather then relying on radial corners – best practice in design.
To my current knowledge all current browser versions support this package.
npm install svelte-smooth-corners
<script>
import SmoothCorners from "svelte-smooth-corners";
</script>
<SmoothCorners cornerRadius="10" cornerSharpness="9">
Hello Squircle World!
</SmoothCorners>
<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>
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>