<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <symbol id="butter">
  <path id="svg_100" fill="red">
   <animate attributeName="d" dur="30s" repeatCount="indefinite" begin="0s" values="m0,400l200,-200l200,200l-400,0z;m0,0l200,200l200,-200l-400,0z;m0,400l200,-200l200,200l-400,0z"/>
  </path>
  <path id="svg_100" fill="red">
   <animate attributeName="d" dur="30s" repeatCount="indefinite" begin="0s" values="m0,0l200,200l200,-200l-400,0z;m0,400l200,-200l200,200l-400,0z;m0,0l200,200l200,-200l-400,0z"/>
  </path>
 </symbol>
 <g>
  <use xlink:href="#butter" opacity="0.15"/>
  <use xlink:href="#butter" transform="rotate(45, 200, 200)" opacity="0.15"/>
  <use xlink:href="#butter" transform="rotate(90, 200, 200)" opacity="0.15"/>
  <use xlink:href="#butter" transform="rotate(-45, 200, 200)" opacity="0.15"/>
  <animatetransform attributename="transform" attributetype="xml" type="rotate" begin="0s" dur="60s" values="0 200 200;360 200 200" repeatcount="indefinite"/>
 </g>
 <circle cx="200" cy="200" fill="red" opacity="0.15">
  <animate attributeName="r" dur="30s" repeatCount="indefinite" begin="0s" values="0;100"/>
 </circle>
 <circle cx="200" cy="200" fill="red" opacity="0.15">
  <animate attributeName="r" dur="30s" repeatCount="indefinite" begin="0s" values="100;200"/>
 </circle>
 <circle cx="200" cy="200" fill="red" opacity="0.15">
  <animate attributeName="r" dur="30s" repeatCount="indefinite" begin="0s" values="200;300"/>
 </circle>
 <circle cx="200" cy="200" stroke="red" fill="none" stroke-width="1" opacity="0.25">
  <animate attributeName="r" dur="2s" repeatCount="indefinite" begin="0s" values="0;100"/>
 </circle>
 <circle cx="200" cy="200" stroke="red" fill="none" stroke-width="1" opacity="0.25">
  <animate attributeName="r" dur="2s" repeatCount="indefinite" begin="0s" values="100;200"/>
 </circle>
 <circle cx="200" cy="200" stroke="red" fill="none" stroke-width="1" opacity="0.25">
  <animate attributeName="r" dur="2s" repeatCount="indefinite" begin="0s" values="200;300"/>
 </circle>
 <circle cx="200" cy="200" stroke="red" fill="none" stroke-width="1" opacity="0.25">
  <animate attributeName="r" dur="2s" repeatCount="indefinite" begin="0s" values="100;0"/>
 </circle>
 <circle cx="200" cy="200" stroke="red" fill="none" stroke-width="1" opacity="0.25">
  <animate attributeName="r" dur="2s" repeatCount="indefinite" begin="0s" values="200;100"/>
 </circle>
 <circle cx="200" cy="200" stroke="red" fill="none" stroke-width="1" opacity="0.25">
  <animate attributeName="r" dur="2s" repeatCount="indefinite" begin="0s" values="300;200"/>
 </circle>
 <a xlink:href="https://fr.wikipedia.org/wiki/Hypnos">
  <text style="cursor: text;" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="24" id="Hypnos" y="208.22656" x="200.12305" fill="red">Ὕπνος</text>
 </a>
</svg>