Draw smooth borders around any element, with Svelte
Demo
Default
Change endColor
Change borderRadius
Change startingDeg
Change direction
Installation
Install svelte-draw-border with the package manager of your choice
npm i svelte-draw-border
# yarn add svelte-draw-border
# pnpm add svelte-draw-borderUsage
Wrap the DrawBorder component around any single DOM node to enable the drawn border animation on said node.
<script>
import DrawBorder from 'svelte-draw-border';
</script>
<DrawBorder initialColor="green" endColor="white">
<button>Submit</button>
</DrawBorder>Props
| Name | Type | Default | Description |
|---|---|---|---|
| borderRadius | string | 0px | Works with any valid CSS border-radius value |
| borderWidth | string | 2px | Use px, ems, or rems |
| initialColor | string | transparent | Works with any valid CSS color value. |
| endColor | string | green | Works with any valid CSS color value |
| startingDeg | number | 90 | The position of the animation start, 0 being the middle & top of the target element |
| direction | 'clockwise', 'counter-clockwise' | 'clockwise' | The direction of the animation |