Payneer SVG logo and spinner. Mix blend mode version.

by AntowaKartowa

HTML

<!-- 
Taken from: https://css-tricks.com/my-struggle-to-use-and-animate-a-conic-gradient-in-svg/
Only replaced semi-ideal path with circle which is shorter, simpler and ideal.
What I mean by ideal - if you check original article examples you can spot on 
the top and of the spinner slight shift up and down.
-->

<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: black;
      stroke-width: 8;
      stroke-dasharray: 288.5;
      stroke-linecap: round;
    }
  </style>
  <foreignObject class="logoBack" x="0" y="0" width="100" height="100">
    <div class="logoGradient" xmlns="http://www.w3.org/1999/xhtml"></div>
  </foreignObject>

  <g class="logoBlend">
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="46" fill="none" />
  </g>
</svg>

<p>Spinner</p>
<svg viewBox="0 0 100 100" width="250" height="250">
  <style type="text/css">
    #logoBack {
      transform-origin: 50px 50px;
      animation: rotate 7.5s infinite linear;
    }

    #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: black;
      stroke-width: 8;
      stroke-dasharray: 288.5;
      stroke-linecap: round;
      transform-origin: 50px 50px;
      animation: offsetStroke 3.75s infinite ease-in-out,
        rotate 7.5s infinite cubic-bezier(1,.5,0,.5);
    }

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