feat: add <SquigglyDivider /> component

This commit is contained in:
madkarmaa 2025-04-14 10:54:00 +02:00
parent a90f555698
commit 7f3a6d49d1
2 changed files with 27 additions and 0 deletions

View File

@ -0,0 +1,20 @@
<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
<pattern id="pattern" width="91" height="8" patternUnits="userSpaceOnUse">
<path
d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
stroke-linecap="square"
/>
</pattern>
<rect width="100%" height="100%" fill="url(#pattern)" />
</svg>
<style>
path {
stroke: var(--border);
}
svg {
padding-left: 1rem;
padding-right: 1rem;
}
</style>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,7 @@
<script lang="ts">
import SquigglyDivider from '$components/atoms/SquigglyDivider.svelte';
</script>
<footer>
<SquigglyDivider />
</footer>