SOURCE

console.clear();

var tl = new TimelineMax();

tl.set(['#circle-ell', '#circle-you'], {
  transformOrigin: 'center center'
});

tl.to('#circle-ell', 36, {
  rotation: -360,
  ease: 'Linear.easeNone',
  repeat: -1,
  delay: -15
}, 0)
tl.to('#circle-you', 85, {
  rotation: -360,
  ease: 'Linear.easeNone',
  repeat: -1
}, 0);

<svg class="ell-you" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -5 409 348">

  <g id="circle-ell">
    <circle fill="#ccc" cx="70" cy="273" r="60" />
    <text fill="#000" font-size="49" x="70" y="273" dy="16" text-anchor="middle">JS</text>
  </g>

  <g id="circle-you">
    <circle fill="#333" cx="266" cy="142.5" r="132" />
    <text fill="#FFF" x="266" y="142.5" dy="52" text-anchor="middle" font-size="100">
      RUN
    </text>
  </g>

  <path class="chain" stroke="#555" d="M289.4 12.8a134.8 134.8 0 0 1 39.8 263.5L110 337.6s-11.2 2.5-17.3 2.5A62 62 0 0 1 44 240L180.8 67.8a134.6 134.6 0 0 1 108.6-55z " transform="translate(-23 -4.9)" />
</svg>

html, body { background: #000; color: #FFF; height: 100%; width: 100%; }

.ell-you {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  max-width: 90%;
  display: block;

  font-family: 'Bebas Neue';
  font-weight: 700;

  contain: strict;
}

.chain {
  fill: none;
  stroke-width: 5;
  stroke-dasharray: 10 5;
  stroke-dashoffset: 15;

  animation: chain-stroke 1.4s linear infinite;
  @keyframes chain-stroke {
    from {
      stroke-dashoffset: 0;
    }
  }
}