SVG 2 Sec C (Copy 19163)

✨ นายณัฐวุฒิ สอนเขียว

<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  fill="#f008" r="20" cx="50" cy="20">
         <animate attributeName="cx" values="
                                           -10;
                                           110;
                                           "
                 dur="10" repeatCount="indefinite"/>
        <animate attributeName="cy" values="
                                           30;
                                           5;
                                            30;
                                           "
                 dur="10" repeatCount="indefinite"/>
        <animate attributeName="r" values="
                                           10;
                                           15;
                                           10;
                                           "
                 dur="10" repeatCount="indefinite"/>
        <animate attributeName="fill" values="
                                              #fa0f;
                                              #fa08;
                                              #fa0f;
                                              "
                 dur="1" repeatCount="indefinite"/>
      </circle>
      
    </svg>
  </body>
</html>