SVG 2

✨ Jabont

<html>
  <head>
    <title>SVG
    </title>
    <style>
      body{
        background:#666;
        margin:0em;
        margin-top:2em;
        font-family:sans-serif;
      }
      svg{
        background:white;
        width:90vmin;
        height:90vmin;
        display:block;
        margin:auto;
        box-shadow:0px 0px 10px #0006;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <circle r="10" cx="50" cy="50" fill="red">
        <animate attributeName="r" values="
                                           10;
                                           20;
                                           10;
                                           " 
                 dur="3" repeatCount="indefinite"/>
        <animate attributeName="cy" values="
                                            110;
                                            -50;
                                            " 
                 dur="3" repeatCount="indefinite"/>
      </circle>
      <path d="m0,50 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10" stroke="blue" fill="#00f5">
        <animate attributeName="d" values="
                                           m0,50 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10;
                                           m-20,50 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10 l10,10 l10,-10;
                                           " 
                 dur="1" repeatCount="indefinite"/>
      </path>
    </svg>
  </body>
</html>