logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-500 -300 1000 600">
  <!-- animations -->
  <style>
    .letter {
      animation: draw_letters 1s ease forwards;
      stroke-dasharray: 923;
    }
    .bracket {
      stroke-dasharray: 564;
      animation: draw_brackets 1s ease forwards;
    }
    .line {
      animation: draw_lines 1s ease forwards;
    }
    .circle {
      animation: draw_circles 1s ease forwards;
    }
    @keyframes draw_letters {
      from {
        stroke-dashoffset: 923;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes draw_brackets {
      from {
        stroke-dashoffset: 564;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes draw_lines {
      0% {
        stroke-width: 0;
      }
      50% {
        stroke-width: 0;
      }
      100% {
        stroke-width: 50px;
      }
    }
    @keyframes draw_circles {
      0% {
        stroke-width: 0;
      }
      50% {
        stroke-width: 0;
      }
      100% {
        stroke-width: 30px;
      }
    }
  </style>

  <!-- background -->
  <!-- <rect fill="#ad1457" x="-500" y="-500" width="1000" height="1000" /> -->

  <!-- logo -->
  <g transform="scale(0.9)">
    <!-- M -->
    <path
      class="letter"
      fill="none"
      stroke="#ffffff"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="50"
      d="
        M -125 125 
        L -125 -125
        L 0 45
        L 125 -125
        L 125 125
      "
    />
    <!-- left bracket -->
    <path
      class="bracket"
      fill="none"
      stroke="#ffffff"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="50"
      d="
        M -200 -250
        L -330 0 
        L -200 250
      "
    />
    <!-- right bracket -->
    <path
      class="bracket"
      fill="none"
      stroke="#ffffff"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="50"
      d="
        M 200 250 
        L 330 0
        L 200 -250
      "
    />
    <!-- left line -->
    <path
      class="line"
      fill="none"
      stroke="#ffffff"
      stroke-linecap="round"
      stroke-width="50"
      d="
        M -330 0
        L -370 0
      "
    />
    <!-- right line -->
    <path
      class="line"
      fill="none"
      stroke="#ffffff"
      stroke-linecap="round"
      stroke-width="50"
      d="
        M 330 0
        L 370 0
      "
    />
    <!-- left circle -->
    <circle
      class="circle"
      cx="-455"
      cy="0"
      r="30"
      fill="none"
      stroke="#ffffff"
      stroke-width="30"
    />
    <!-- right circle -->
    <circle
      class="circle"
      cx="455"
      cy="0"
      r="30"
      fill="none"
      stroke="#ffffff"
      stroke-width="30"
    />
  </g>
</svg>