4dkankan-components/docs/.vitepress/vitepress/components/home/svg/left-layer-svg.vue

<template>
    <svg class="left-layer-svg" width="262" height="173" viewBox="0 0 262 173" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_11237_126796)">
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.66289 1.92664C3.21061 1.92664 1.22266 3.9146 1.22266 6.36687V155.114C1.22266 157.567 3.21061 159.555 5.66289 159.555H173.559L186.602 172.32L199.09 159.555H256.536C258.988 159.555 260.976 157.567 260.976 155.114V6.36688C260.976 3.9146 258.988 1.92664 256.536 1.92664H5.66289Z"
                fill="var(--ll-c-0)"
            />
            <path
                d="M80.8689 23.0177H38.1317C32.1543 23.0177 27.3086 27.8633 27.3086 33.8407C27.3086 39.8182 32.1543 44.6638 38.1317 44.6638H80.8689C86.8463 44.6638 91.692 39.8182 91.692 33.8407C91.692 27.8633 86.8463 23.0177 80.8689 23.0177Z"
                fill="#C7DCFB"
            />
            <path
                d="M230.449 64.0898H31.7488C29.2966 64.0898 27.3086 66.0778 27.3086 68.5301V81.2957C27.3086 83.748 29.2966 85.7359 31.7488 85.7359H230.449C232.902 85.7359 234.89 83.748 234.89 81.2957V68.5301C234.89 66.0778 232.902 64.0898 230.449 64.0898Z"
                fill="#A2C5F9"
            />
            <path
                d="M230.449 103.497H31.7488C29.2966 103.497 27.3086 105.485 27.3086 107.938V120.703C27.3086 123.156 29.2966 125.144 31.7488 125.144H230.449C232.902 125.144 234.89 123.156 234.89 120.703V107.938C234.89 105.485 232.902 103.497 230.449 103.497Z"
                fill="#A2C5F9"
            />
        </g>
        <defs>
            <clipPath id="clip0_11237_126796">
                <rect width="261" height="172" fill="white" transform="translate(0.491211 0.941406)" />
            </clipPath>
        </defs>
    </svg>
</template>

<style scoped>
.left-layer-svg {
    --ll-c-0: #5c97ee;
}

.dark .left-layer-svg {
    --ll-c-0: #4372b6;
}
</style>