coconut.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <style>
    @keyframes spin {
      50% {
        filter: hue-rotate(90deg);
      }

      75% {
        filter: hue-rotate(0deg);
        transform: rotate(var(--spin));
      }

      to {
        transform: rotate(var(--spin));
      }
    }

    @keyframes toss-up {
      50% {
        transform: translateY(-50%);
      }
    }

    :root {
      --duration: 5s;
      --spin: calc(-4*360deg);
      animation: var(--duration) cubic-bezier(.25, .4, .6, 2.25) infinite toss-up;
    }

    g#coconut {
      transform-origin: center;
      animation: var(--duration) steps(30, start) infinite spin;
    }

    @media (prefers-color-scheme: dark) {
      .outer {
        fill: #CDAB8F
      }

      #accent {
        fill: #DEDDDA
      }

      .shell {
        fill: #B5835A
      }

      g#coconut,
      :root {
        animation-play-state: running;
      }
    }

    @media (prefers-color-scheme: light) {
      .outer {
        fill: #8B5E3C
      }

      #accent {
        fill: #A97C50
      }

      .shell {
        fill: #603913
      }

      g#coconut,
      :root {
        animation-play-state: paused;
      }
    }
  </style>
  <g id="coconut">
    <path class="outer"
      d="M5.506 30.167c-7.03-7.029-6.397-19.059 1.414-26.87l25.456 25.456c-7.811 7.811-19.841 8.443-26.87 1.414z" />
    <path class="shell"
      d="M6.92 3.297c-3.905 3.905-1.373 12.77 5.656 19.8 7.031 7.029 15.895 9.561 19.799 5.656 3.905-3.904 1.374-12.769-5.657-19.799C19.69 1.924 10.825-.607 6.92 3.297z" />
    <path fill="#F5F8FA"
      d="M31.591 24.217c.229.229.56.336.887.276.387-.071.696-.362.79-.745.067-.269 1.575-6.67-3.013-11.258-1.12-1.12-2.783-3.774-3.256-4.544-.4-.415-.733-.27-1.498-1.035-.35-.35-1.405-2.248-4.439.629-.35.332-.39.878-.116 1.275l10.528 15.263c.036.05.075.097.117.139z" />
    <path class="shell"
      d="M24.271 7.562c.707.707 1.458 1.417 1.458 1.417s2.404 2.804 3.819 4.218c4.242 4.243 2.75 10.313 2.75 10.313L20.646 7.833s2.792-1.042 3.625-.271zm1.271-1.354c-1.833-1.438-4.777-.315-5.5.396-.683.683-.467 1.984.081 2.778l10.528 15.263c.07.101.147.193.232.278.46.46 1.121.673 1.775.553.774-.142 1.393-.725 1.581-1.489.072-.293 1.705-7.223-3.277-12.205-.892-.892-1.938-1.738-2.909-2.913-.329-.423-1.186-1.441-2.074-2.328l-.437-.333z" />
    <path fill="#F5F8FA"
      d="M8.334 4.711c-3.124 3.124-.592 10.722 5.657 16.97 6.247 6.248 13.846 8.781 16.97 5.657 3.124-3.124.591-10.723-5.657-16.971-6.248-6.247-13.846-8.78-16.97-5.656z" />
    <path fill="#99AAB5"
      d="M10.411 6.877c-2.318 2.318-.083 8.314 4.994 13.391 5.078 5.078 11.072 7.312 13.391 4.994 2.318-2.318.083-8.313-4.994-13.391-5.076-5.078-11.072-7.313-13.391-4.994z" />
    <path fill="#99AAB5"
      d="M20.199 9.939l1.176-.335c.562-.312 1.354-.333 1.896.167l1.211 1.273c.573.69 1.919 2.137 2.995 3.213 3.807 3.807 2.319 8.722 2.253 8.93-.057.182-.213.315-.401.344-.159.024-.318-.029-.429-.141-.021-.021-.04-.043-.058-.068l-8.797-12.669c-.079-.114-.108-.254-.078-.39.029-.135.113-.252.232-.324z" />
    <path fill="#F5F8FA"
      d="M23.76 26.056s-3.209-2.085-3.771-3.771c-.628-1.885-4.662-2.252-5.29-4.138-.627-1.885-1.676-4.765-2.253-5.918-.576-1.153-1.258-.001-1.886-1.886-.628-1.887-1.885-3.144-1.885-3.144s0 8.801 1.885 10.686c1.886 1.886 9.429 9.429 10.058 8.799.628-.628 3.142-.628 3.142-.628z" />
    <path class="shell"
      d="M22.838 27.73s-3.73-2.537-4.316-4.294c-.655-1.964-5.29-2.619-5.944-4.583-.655-1.964-1.596-5.486-1.913-5.892-.916-1.18-1.309-.001-1.964-1.964-.655-1.965-1.964-3.274-1.964-3.274s0 9.166 1.964 11.13c1.964 1.965 9.82 9.821 10.476 9.166.655-.654 3.661-.289 3.661-.289z" />
    <path class="outer"
      d="M21.769 29.46s-3.61-2.345-4.242-4.242c-.707-2.121-6.365-3.536-7.072-5.657-.707-2.122-.707-4.95-1.414-5.657-.707-.708-1.414 0-2.121-2.122-.707-2.121-2.121-3.535-2.121-3.535s0 9.9 2.121 12.021 10.606 10.606 11.313 9.899c.708-.707 3.536-.707 3.536-.707z" />
    <path id="accent"
      d="M10.811 32.853c.091-.285.836-.061 1.113.001 6.934 1.526 11.66-1.385 11.712-1.409.272-.136.579-.034.685.224.106.258-.026.577-.296.712-.225.112-4.808 2.55-12.125.939-.091-.021-.721-.131-.781-.191-.123-.123-.37-.084-.308-.276zm-8.364-9.968c.115.114.108.212.29.165.288-.073.299-.517.255-.798-.492-3.192.36-6.504 1.841-10.352.107-.281-.027-.575-.294-.652-.272-.08-.579.084-.687.364-1.555 4.034-2.057 7.636-1.536 11.013.017.104.064.192.131.26zm10.357 9.178c.07.071.167.118.279.132 3.769.426 6.893-1.137 7.024-1.204.269-.137.4-.456.291-.714-.108-.259-.417-.356-.688-.218-.029.015-2.743 1.843-6.181 1.453-.285-.032-.826-.016-.889.275-.036.177.053.166.164.276z" />
  </g>
</svg>