BackgroundLogo.vue

<template>
  <div class="relative flex items-center justify-center">
    <div class="hero-background absolute blur-[72px] w-96 h-96 rounded-[50%]" />
    <div class="relative">
      <svg
        width="128"
        height="128"
        viewBox="0 0 128 128"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle cx="64.5" cy="63.5" r="57.5" fill="#257866" />
        <path
          opacity="0.2"
          d="M67.375 40.25V78.25H53.125V49.75H38.875V40.25C38.875 39.6201 39.1252 39.016 39.5706 38.5706C40.016 38.1252 40.6201 37.875 41.25 37.875H50.75C51.3799 37.875 51.984 38.1252 52.4294 38.5706C52.8748 39.016 53.125 39.6201 53.125 40.25C53.125 39.6201 53.3752 39.016 53.8206 38.5706C54.266 38.1252 54.8701 37.875 55.5 37.875H65C65.6299 37.875 66.234 38.1252 66.6794 38.5706C67.1248 39.016 67.375 39.6201 67.375 40.25ZM94.0641 84.6625L91.6 75.489L77.825 79.2L80.2891 88.3734C80.4557 88.9788 80.8554 89.4936 81.4006 89.8052C81.9458 90.1168 82.5922 90.1997 83.1984 90.0359L92.3719 87.5718C92.6744 87.4925 92.9582 87.3542 93.2071 87.1649C93.456 86.9756 93.6651 86.7389 93.8223 86.4686C93.9795 86.1983 94.0818 85.8996 94.1233 85.5897C94.1648 85.2797 94.1447 84.9646 94.0641 84.6625V84.6625ZM81.7734 38.7953C81.6063 38.1886 81.2081 37.6717 80.6641 37.3553C80.1202 37.039 79.474 36.9484 78.8641 37.1031L69.6906 39.5671C69.084 39.7343 68.5671 40.1325 68.2507 40.6764C67.9343 41.2203 67.8438 41.8666 67.9984 42.4765L70.4625 51.65L84.2375 47.9687L81.7734 38.7953Z"
          fill="white"
        />
        <path
          d="M96.35 84.0688L84.0594 38.1719C83.7325 36.9555 82.9358 35.9188 81.8446 35.2897C80.7535 34.6606 79.4571 34.4907 78.2406 34.8172L69.0672 37.2813L68.7703 37.3704C68.3278 36.7899 67.7575 36.3192 67.1036 35.9948C66.4497 35.6705 65.7299 35.5012 65 35.5H55.5C54.6643 35.5023 53.8443 35.7278 53.125 36.1532C52.4057 35.7278 51.5857 35.5023 50.75 35.5H41.25C39.9902 35.5 38.782 36.0005 37.8912 36.8913C37.0004 37.7821 36.5 38.9903 36.5 40.25V87.75C36.5 89.0098 37.0004 90.218 37.8912 91.1088C38.782 91.9996 39.9902 92.5 41.25 92.5H50.75C51.5857 92.4978 52.4057 92.2723 53.125 91.8469C53.8443 92.2723 54.6643 92.4978 55.5 92.5H65C66.2598 92.5 67.468 91.9996 68.3588 91.1088C69.2496 90.218 69.75 89.0098 69.75 87.75V58.1813L78.0031 88.9672C78.2721 89.9817 78.8694 90.8786 79.7019 91.5177C80.5344 92.1569 81.5551 92.5023 82.6047 92.5C83.0145 92.4929 83.4224 92.4432 83.8219 92.3516L92.9953 89.8875C94.2117 89.5606 95.2484 88.764 95.8775 87.6728C96.5066 86.5816 96.6766 85.2853 96.35 84.0688V84.0688ZM73.3719 53.3422L82.5453 50.8782L88.6906 73.8266L79.5172 76.2907L73.3719 53.3422ZM79.4578 39.4188L81.3281 46.2766L72.1547 48.7407L70.2844 41.8829L79.4578 39.4188ZM65 40.25V75.875H55.5V40.25H65ZM50.75 40.25V47.375H41.25V40.25H50.75ZM41.25 87.75V52.125H50.75V87.75H41.25ZM65 87.75H55.5V80.625H65V87.75ZM91.7781 85.286L82.6047 87.75L80.7344 80.8625L89.9375 78.3985L91.7781 85.286V85.286Z"
          fill="white"
        />
      </svg>
    </div>
  </div>
</template>

<style lang="css">
.hero-background {
  background-image: linear-gradient(-45deg, #257866c6 50%, #0f93bfbb 50%);
}
</style>