Animated Unite logo

unite-logo.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
   viewBox="0 0 140 138.58">
   <style>
      .looping {
         stroke-width: 12.50;
      }

      .padding {
         stroke-width: 25.3;
         stroke-linecap: round;
      }

      .line {
         fill: none;
         stroke-dasharray: calc(var(--len) / 2);
      }

      #vertical {
         --len: 310.8482971191406;
         -webkit-animation: draw 1000ms infinite linear;
                 animation: draw 1000ms infinite linear;
      }

      #horizontal {
         --len: 312.40899658203125;
         -webkit-animation: draw 750ms infinite linear;
                 animation: draw 750ms infinite linear;
      }

      @-webkit-keyframes draw {
         from {
            stroke-dashoffset: var(--len);
         }

         to {
            stroke-dashoffset: 0;
         }
      }

      @keyframes draw {
         from {
            stroke-dashoffset: var(--len);
         }

         to {
            stroke-dashoffset: 0;
         }
      }
   </style>

   <defs>
      <path id="top"
         d="M 70.169999,0 C 53.95,0 39.63,9.3 39.63,28.89 V 33 H 52.38 V 28.67 C 52.38,16.71 59.2,11.07 70.049999,11.07 80.789999,11.07 87.61,16.72 87.61,28.67 V 80.45 H 100.36 V 28.89 C 100.37,9.3 86.5,0 70.169999,0 Z" />
      <path id="bottom"
         d="M 39.63,58.13 V 109.69 C 39.63,129.28 53.5,138.58 69.829999,138.58 86.049999,138.58 100.37,129.28 100.37,109.69 V 105.58 H 87.62 V 109.91 C 87.62,121.87 80.799999,127.51 69.939999,127.51 59.2,127.51 52.38,121.86 52.38,109.91 V 58.13 Z" />
      <path id="left"
         d="M 29.2,39.23 C 9.4,39.23 0,52.96 0,69.12 0,85.17 9.4,99.34 29.2,99.34 H 33.33 V 86.72 H 28.97 C 16.89,86.72 11.18,79.97 11.18,69.23 11.18,58.6 16.88,51.85 28.97,51.85 H 81.289999 V 39.23 Z" />
      <path id="right"
         d="M 106.67,39.23 V 51.85 H 111.03 C 123.11,51.85 128.82,58.6 128.82,69.34 128.82,79.97 123.11,86.72 111.03,86.72 H 58.7 V 99.34 H 110.8 C 130.6,99.34 140,85.61 140,69.45 140,53.4 130.6,39.23 110.8,39.23 Z" />

      <path id="bg"
         d="M87.62 105.58v4.33c0 11.96-6.820001 17.6-17.680001 17.6C59.2 127.51 52.38 121.86 52.38 109.91V28.67c0-11.96 6.82-17.6 17.669999-17.6 10.74 0 17.560001 5.65 17.560001 17.6v51.78Zm-6.330001-66.35H29.2C9.4 39.23 0 52.96 0 69.12c0 16.05 9.4 30.22 29.2 30.22h81.6c19.8 0 29.2-13.73 29.2-29.89 0-16.05-9.4-30.22-29.2-30.22h-4.13ZM106.67 51.85h4.36c12.08 0 17.79 6.75 17.79 17.49 0 10.63-5.71 17.38-17.79 17.38H28.97c-12.08 0-17.79-6.75-17.79-17.49 0-10.63 5.7-17.38 17.79-17.38h52.319999Zm-6.31 28.6V28.89C100.37 9.3 86.5 0 70.169999 0 53.95 0 39.63 9.3 39.63 28.89v80.8c0 19.59 13.87 28.89 30.199999 28.89 16.22 0 30.540001-9.3 30.540001-28.89v-4.11Z" />

      <!-- using M0,0 allows renderers to skip somehow optimising (?) the mask and actually clipping too much of the path -->
      <path id="horizontal" class="line"
         d="M 0,0 M 46.005859,45.605469 H 33.255859 29.199219 C 20.772775,45.605469 15.539383,48.282772 11.949219,52.339844 8.3590542,56.396916 6.375,62.275224 6.375,69.119141 6.375,75.899586 8.368933,81.906402 11.986328,86.066406 15.603723,90.226411 20.819997,92.964844 29.199219,92.964844 H 33.255859 46.005859 93.992187 106.74219 110.80078 C 119.22722,92.964844 124.46062,90.287541 128.05078,86.230469 131.64095,82.173397 133.625,76.293135 133.625,69.449219 133.625,62.668774 131.63107,56.663911 128.01367,52.503906 124.39628,48.343902 119.18,45.605469 110.80078,45.605469 H 106.73633 93.986328 Z" />

      <path id="vertical" class="line"
         d="M 0,0 M 93.994141,105.71484 V 109.68945 C 93.994141,117.9311 91.261363,123.04242 87.050781,126.62695 82.8402,130.21148 76.721668,132.20508 69.830078,132.20508 62.875282,132.20508 56.885585,130.22078 52.78125,126.66406 48.676915,123.10734 46.005859,117.97991 46.005859,109.68945 V 105.71484 92.964844 45.605469 32.855469 28.890625 C 46.005859,20.648977 48.738638,15.537657 52.949219,11.953125 57.1598,8.3685934 63.278333,6.375 70.169922,6.375 77.12472,6.375 83.114115,8.3599233 87.216797,11.916016 91.319479,15.472108 93.988607,20.596772 93.984375,28.886719 V 28.888672 28.890625 C 93.984375,30.212141 93.984396,31.533943 93.984375,32.855469 L 93.986328,45.605469 C 93.985783,61.39128 93.986667,77.17752 93.992187,92.964844 Z" />

      <mask id="mask-vertical">
         <use xlink:href="#bg" fill="white" />
         <use xlink:href="#horizontal" stroke="black" class="padding" />
         <use xlink:href="#top" fill="white" />
         <use xlink:href="#bottom" fill="white" />
      </mask>

      <mask id="mask-horizontal">
         <use xlink:href="#bg" fill="white" />
         <use xlink:href="#vertical" stroke="black" class="padding" />
         <use xlink:href="#left" fill="white" />
         <use xlink:href="#right" fill="white" />
      </mask>

      <linearGradient id="gradient" x1="88.560204" x2="172.4393" y1="172.4395" y2="88.560402"
         gradientTransform="translate(-60.499998 -61.21)" gradientUnits="userSpaceOnUse">
         <stop offset="0" stop-color="#fb563e" />
         <stop offset=".3" stop-color="#fb563e" />
         <stop offset=".7" stop-color="#9c257f" />
         <stop offset="1" stop-color="#9c237d" />
      </linearGradient>
   </defs>

   <g style="stroke:url(#gradient)">
      <use xlink:href="#vertical" mask="url(#mask-vertical)" class="looping" />
      <use xlink:href="#horizontal" mask="url(#mask-horizontal)" class="looping" />
   </g>
</svg>