<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SVG + CSS</title>
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 115 115">
    <path fill="none" stroke="rgba(0, 0, 0, 0.05)" stroke-width="3" d="M 85 85 C -5 16 -39 127 78 30 C 126 -9 57 -16 85 85 C 94 123 124 111 85 85 Z" />
    <path id="el" fill="none" stroke-dasharray="60 310" stroke-linecap="round" stroke-width="3" d="M 85 85 C -5 16 -39 127 78 30 C 126 -9 57 -16 85 85 C 94 123 124 111 85 85 Z" />
  </svg>
</body>

</html>
:root {
  --base-speed-dashoffset: 7600ms;
  --base-speed-stroke: 6000ms;
  --speed: 2;

  --speed-dashoffset: calc(var(--base-speed-dashoffset) / var(--speed));
  --speed-stroke: calc(var(--base-speed-stroke) / var(--speed));
}

* {
  box-sizing: border-box;
}

body {
  padding: 10px;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

svg {
  display: block;
  height: 100%;
  margin: 0 auto;
}

#el {
  will-change: stroke, stroke-dashoffset;
  stroke-dashoffset: 372;
  animation: dash var(--speed-dashoffset) linear infinite,
    stroke var(--speed-stroke) linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke {
  0% {
    stroke: #f15a31;
  }

  20% {
    stroke: #ffd31b;
  }

  33% {
    stroke: #a6ce42;
  }

  40% {
    stroke: #007ac1;
  }

  45% {
    stroke: #007ac1;
  }

  55% {
    stroke: #007ac1;
  }

  60% {
    stroke: #007ac1;
  }

  67% {
    stroke: #a6ce42;
  }

  80% {
    stroke: #ffd31b;
  }

  100% {
    stroke: #f15a31;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.