element-plus/docs/.vitepress/vitepress/components/home/svg/left-bottom-layer-svg.vue

<template>
  <svg
    class="left-bottom-layer"
    width="468"
    height="258"
    viewBox="0 0 468 258"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g filter="url(#filter0_dd_11237_126801)">
      <path
        d="M442.314 16.9005H24.9315C22.4792 16.9005 20.4912 18.8885 20.4912 21.3408V228.922C20.4912 231.375 22.4792 233.363 24.9315 233.363H442.314C444.766 233.363 446.754 231.375 446.754 228.922V21.3408C446.754 18.8885 444.766 16.9005 442.314 16.9005Z"
        fill="var(--lbl-c-0)"
      />
    </g>
    <path
      d="M256.934 107.925C261.839 107.925 265.815 103.949 265.815 99.0449C265.815 94.1404 261.839 90.1644 256.934 90.1644C252.03 90.1644 248.054 94.1404 248.054 99.0449C248.054 103.949 252.03 107.925 256.934 107.925Z"
      fill="#3F85ED"
    />
    <path
      d="M256.934 162.318C261.839 162.318 265.815 158.342 265.815 153.437C265.815 148.533 261.839 144.557 256.934 144.557C252.03 144.557 248.054 148.533 248.054 153.437C248.054 158.342 252.03 162.318 256.934 162.318Z"
      fill="var(--lbl-c-1)"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M128.722 203.39C171.943 203.39 206.981 168.352 206.981 125.131C206.981 81.9099 171.943 46.8721 128.722 46.8721C85.5007 46.8721 50.4629 81.9099 50.4629 125.131C50.4629 168.352 85.5007 203.39 128.722 203.39ZM128.722 177.304C157.536 177.304 180.894 153.945 180.894 125.131C180.894 96.3171 157.536 72.9585 128.722 72.9585C99.9077 72.9585 76.5492 96.3171 76.5492 125.131C76.5492 153.945 99.9077 177.304 128.722 177.304Z"
      fill="#3F85ED"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M50.4629 125.131H76.5492C76.5492 96.3171 99.9077 72.9585 128.722 72.9585V46.8721C85.5007 46.8721 50.4629 81.9099 50.4629 125.131Z"
      fill="var(--lbl-c-2)"
    />
    <path
      d="M403.461 88.4994H291.345C285.521 88.4994 280.8 93.2208 280.8 99.0449C280.8 104.869 285.521 109.59 291.345 109.59H403.461C409.285 109.59 414.007 104.869 414.007 99.0449C414.007 93.2208 409.285 88.4994 403.461 88.4994Z"
      fill="var(--lbl-c-3)"
    />
    <path
      d="M403.461 142.892H291.345C285.521 142.892 280.8 147.614 280.8 153.438C280.8 159.262 285.521 163.984 291.345 163.984H403.461C409.285 163.984 414.007 159.262 414.007 153.438C414.007 147.614 409.285 142.892 403.461 142.892Z"
      fill="var(--lbl-c-3)"
    />
    <defs>
      <filter
        id="filter0_dd_11237_126801"
        x="2.73027"
        y="3.57981"
        width="461.785"
        height="251.984"
        filterUnits="userSpaceOnUse"
        color-interpolation-filters="sRGB"
      >
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dy="4.44024" />
        <feGaussianBlur stdDeviation="8.88047" />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.039009 0 0 0 0 0.13338 0 0 0 0 0.232469 0 0 0 0.08 0"
        />
        <feBlend
          mode="normal"
          in2="BackgroundImageFix"
          result="effect1_dropShadow_11237_126801"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset />
        <feGaussianBlur stdDeviation="2.22012" />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.0392157 0 0 0 0 0.133333 0 0 0 0 0.231373 0 0 0 0.04 0"
        />
        <feBlend
          mode="normal"
          in2="effect1_dropShadow_11237_126801"
          result="effect2_dropShadow_11237_126801"
        />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="effect2_dropShadow_11237_126801"
          result="shape"
        />
      </filter>
    </defs>
  </svg>
</template>

<style scoped>
.left-bottom-layer {
  --lbl-c-0: white;
  --lbl-c-1: #c7dbf8;
  --lbl-c-2: #98bdf2;
  --lbl-c-3: #e4efff;
}

.dark .left-bottom-layer {
  --lbl-c-0: #1e2835;
  --lbl-c-1: #58677a;
  --lbl-c-2: #2f5790;
  --lbl-c-3: #444f5d;
}
</style>