huebris favicon

by phloe

HTML

<svg width="16" height="16" viewBox="0 0 16 16">
  <defs>
    <linearGradient id="hue" x1="0" x2="0" y1="0" y2="4" spreadMethod="repeat">
      <animate
        attributeName="y1"
        from="0"
        to="-4"
        dur="60s"
        repeatCount="indefinite"
      />
      <animate
        attributeName="y2"
        from="4"
        to="0"
        dur="60s"
        repeatCount="indefinite"
      />
      <stop offset="0%" stop-color="red" />
      <stop offset="16.666667%" stop-color="orange" />
      <stop offset="33.333333%" stop-color="yellow" />
      <stop offset="50%" stop-color="green" />
      <stop offset="66.6666667%" stop-color="cyan" />
      <stop offset="83.3333333%" stop-color="blue" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    <linearGradient id="saturation" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%" stop-color="rgba(127, 127, 127, 0)" />
      <stop offset="100%" stop-color="#777" />
    </linearGradient>
    <linearGradient id="lightness" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="#FFF" />
      <stop offset="50%" stop-color="rgba(255, 255, 255, 0)" />
      <stop offset="50%" stop-color="rgba(0, 0, 0, 0)" />
      <stop offset="100%" stop-color="#000" />
    </linearGradient>
  </defs>
  <style>
    #bg {
      fill: orange;
      animation: 60s bg linear infinite;
    }
    @keyframes bg {
      0 {
        fill: orange;
      }
      16.666667% {
        fill: yellow;
      }
      33.333333% {
        fill: green;
      }
      50% {
        fill: cyan;
      }
      66.666667% {
        fill: blue;
      }
      83.333333% {
        fill: red;
      }
      100% {
        fill: orange;
      }
    }
  </style>
  <rect id="h" y="1" width="2" height="14" fill="url(#hue)" />
  <rect id="bg" x="2" y="1" width="14" height="14" />
  <rect id="s" x="2" y="1" width="14" height="14" fill="url(#saturation)" />
  <rect id="l" x="2" y="1" width="14" height="14" fill="url(#lightness)"...

CSS

svg {
  width: 64px;
  height: 64px;
}