<script>
import DrawBorder from './DrawBorder.svelte';
let text = 'Submit';
</script>
<h1>Draw Border Animation</h1>
<p>Hover to see the animation!</p>
<div class="flex-col">
<!-- Rounded with Purple & White Stroke -->
<DrawBorder borderRadius="100px">
<button>{text}</button>
</DrawBorder>
<!-- Square with Red & Blue Stroke -->
<DrawBorder
initialColor="red"
endColor="blue"
startingDeg={180}
>
<button>{text}</button>
</DrawBorder>
<!-- Slightly Rounded with White & Green Stroke -->
<DrawBorder
borderRadius="10px"
initialColor="green"
endColor="white"
startingDeg={280}
>
<button>{text}</button>
</DrawBorder>
</div>
<hr/>