Payneer SVG logo and spinner. Svg mask version

by AntowaKartowa

HTML

<!-- 
Based on the comment under: 
-->

<svg viewBox="0 0 100 100">
  <style type="text/css">
    .logoGradient {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 72% 75%, #ff4800 95%);
    }

    .logoBlend {
      mix-blend-mode: lighten;
    }

    circle {
      stroke: white;
      stroke-width: 8;
      stroke-dasharray: 288.5;
      stroke-linecap: round;
    }
  </style>
  <defs>
    <mask id="mask1">
      <circle cx="50" cy="50" r="46" fill="none" />
    </mask>
  </defs>
  <foreignObject class="logoWrap" mask="url(#mask1)" x="0" y="0" width="100" height="100">
    <div class="logoGradient" xmlns="http://www.w3.org/1999/xhtml"></div>
  </foreignObject>
</svg>

<p>Spinner</p>
<svg viewBox="0 0 100 100" width="250" height="250">
  <style type="text/css">
    #logoWrap {
      transform: rotate(270deg);
      transform-origin: 50px 50px;
      animation: rotateColor 7.5s infinite linear;
      will-change: transform;
    }

    #logoGradient {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 72% 75%, #ff4800 95%);
    }

    #circle {
      stroke: white;
      stroke-width: 8;
      stroke-dasharray: 288.5;
      stroke-linecap: round;
      transform-origin: 50px 50px;
      will-change: stroke-dashoffset, transform;
      animation: offsetStroke 3.75s infinite ease-in-out,
        rotate 7.5s infinite cubic-bezier(1,.5,0,.5);
    }

    @keyframes rotateColor {
      from { transform: rotate(270deg); }
      to { transform: rotate(-90deg); }
    }

    @keyframes offsetStroke {
      0% {  stroke-dashoffset: -288.5; }
      40%, 70% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 288.5; }
    }

    @keyframes rotateCircle {
      0% {  transform:...