All files / js/components PlaceholderPattern.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import { computed } from 'vue';
 
const patternId = computed(
    () => `pattern-${Math.random().toString(36).substring(2, 9)}`,
);
</script>
 
<template>
    <svg
        class="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20"
        fill="none"
    >
        <defs>
            <pattern
                :id="patternId"
                x="0"
                y="0"
                width="8"
                height="8"
                patternUnits="userSpaceOnUse"
            >
                <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
            </pattern>
        </defs>
        <rect
            stroke="none"
            :fill="`url(#${patternId})`"
            width="100%"
            height="100%"
        ></rect>
    </svg>
</template>