SVG Path Arcs (Branch 7517)

✨ NOPPANUT KHAMMUEANG

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#333;
        margin:1em;
        font-family:sans-serif;
      }
      svg{
        background:#eee;
      }
      
      .b1{
        transform: translateY(0px);
 			 animation: move 5s infinite alternate;
      }
      @keyframes move{
			0% {
    transform: translateY(0px);
  }
      25% {
    transform: translateY(-50px) ;
  }
      50% {
    transform: translateX(-60px) translateY(-50px);
  }
        75% {
    transform: translateY(0) translateX(-60px);
  }
      100% {
    transform: translateY(0px);
  }
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <rect width="300" height="100" fill="#777dd1"></rect>
      <circle cy=78 cx =78 r=12 fill="#c9c859" class="b1"/>
      <circle cy=80 cx =80 r=12 fill="#f7ee79" class="b1"/>
      <path d="M 68 80 C 55 90, 105 90, 92 80
               		C 100 85, 60 85, 68 80
               
               " fill=
"#848494"  class="b1" fill="#0000" />
      <circle r=1 cy = 10 cx = 10 fill="#ffff57" ></circle>
      <circle r=1 cy = 30 cx = 60 fill="#ffff57"></circle>
      <circle r=1 cy = 15 cx = 90 fill="#ffff57"></circle>
      <circle r=1 cy = 50 cx = 15 fill="#ffff57"></circle>
      <circle r=1 cy = 80 cx = 20 fill="#ffff57"></circle>
      <circle r=1 cy = 60 cx = 70 fill="#ffff57"></circle>
      <circle r=1 cy = 80 cx = 95 fill="#ffff57"></circle>
      <circle r=1 cy = 40 cx = 80 fill="#ffff57"></circle>
      <circle r=1 cy = 85 cx = 50 fill="#ffff57"></circle>
      <path fill="#0000" stroke="orange" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m50,20
               a1,1 0 1,0 8,-7

"
            />
      <path fill="#0000" stroke="orange" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m9,20
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 2,10
                a1,1 0 1,0 2,10
                a1,1 0 1,0 -5,10
                a1,1 0 1,0 -10,5
                a1,1 0 1,0 -10,0
                a1,1 0 1,0 -10,-2
               a1,1 0 1,0 -7,-5
               a1,1 0 1,0 -3,-10
               a1,1 0 1,0 0,-12
               z

"
            >
        
        <animate attributeName="d" values="
                                           m9,20
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 2,10
                a1,1 0 1,0 2,10
                a1,1 0 1,0 -5,10
                a1,1 0 1,0 -10,5
                a1,1 0 1,0 -10,0
                a1,1 0 1,0 -10,-2
               a1,1 0 1,0 -7,-5
               a1,1 0 1,0 -3,-10
               a1,1 0 1,0 0,-12
               z;
              m30,50
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 2,10
                a1,1 0 1,0 2,10
                a1,1 0 1,0 -5,10
                a1,1 0 1,0 -10,5
                a1,1 0 1,0 -10,0
                a1,1 0 1,0 -10,-2
               a1,1 0 1,0 -7,-5
               a1,1 0 1,0 -3,-10
               a1,1 0 1,0 0,-12
               z;
                                           m60,70
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 2,10
                a1,1 0 1,0 2,10
                a1,1 0 1,0 -5,10
                a1,1 0 1,0 -10,5
                a1,1 0 1,0 -10,0
                a1,1 0 1,0 -10,-2
               a1,1 0 1,0 -7,-5
               a1,1 0 1,0 -3,-10
               a1,1 0 1,0 0,-12
               z;
                                           m9,20
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,-7
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 8,3
               a1,1 0 1,0 2,10
                a1,1 0 1,0 2,10
                a1,1 0 1,0 -5,10
                a1,1 0 1,0 -10,5
                a1,1 0 1,0 -10,0
                a1,1 0 1,0 -10,-2
               a1,1 0 1,0 -7,-5
               a1,1 0 1,0 -3,-10
               a1,1 0 1,0 0,-12
               z
                                          
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <circle r=13 fill="#dbb539" cx=28 cy=28></circle>
      <path fill="yellow" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m18,30
               a1,1 0 0,1 25,0
               a1,1 0 0,1 -25,0
               "
            >
        
        <animate attributeName="d" values="
                                           
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <path fill="orange" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m25,25
               a1,1 0 0,1 5,0
 
               "
            >
        
        <animate attributeName="d" values="
                                           m25,25
               a1,1 0 0,1 5,0;
                                           m30,25
               a1,1 0 0,1 5,0;
                                           m25,25
               a1,1 0 0,1 5,0;
                                           " dur="10s" repeatCount="indefinite" />
      </path>
       <path fill="orange" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m35,25
               a1,1 0 0,1 5,0
 
               "
            >
        
        <animate attributeName="d" values="
                                           m35,25
               a1,1 0 0,1 5,0;
                                           m40,25
               a1,1 0 0,1 5,0;
                                           m35,25
               a1,1 0 0,1 5,0;
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <circle r=1 cx= 30 cy =28 fill="orange"></circle>
      <circle r=1 cx= 40 cy =28 fill="orange"></circle>
      <path fill="orange" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m28,30
               a1,1 0 1,0 15,0
 
               "
            >
        
        <animate attributeName="d" values="
                                           m28,30
               a1,1 0 1,0 15,0;
                                           m33,30
               a1,1 0 1,0 15,0;
                                           m28,30
               a1,1 0 1,0 15,0;
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <circle cy=58 cx =48 r=12 fill="#68c3d4"></circle>
      <circle cy=60 cx =50 r=12 fill="skyblue"></circle>
      <path fill="green" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m50,62
               a1,1 0 1,0 10,0
 
               "
            >
        
        <animate attributeName="d" values="
                                           m50,62
               a1,1 0 1,0 10,0;
                                           m55,62
               a1,1 0 1,0 10,0;
                                           m50,62
               a1,1 0 1,0 10,0;
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <path fill="green" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m45,56
               a1,1 0 0,1 5,0
 
               "
            >
        
        <animate attributeName="d" values="
                                           m45,56
               a1,1 0 0,1 5,0;
                                           m50,56
               a1,1 0 0,1 5,0;
                                           m45,56
               a1,1 0 0,1 5,0;
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <path fill="green" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m55,56
               a1,1 0 0,1 5,0
 
               "
            >
        
        <animate attributeName="d" values="
                                           m55,56
               a1,1 0 0,1 5,0;
                                           m60,56
               a1,1 0 0,1 5,0;
                                           m55,56
               a1,1 0 0,1 5,0;
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <circle r=1 cx= 50 cy =60 fill="green"></circle>
      <circle r=1 cx= 60 cy =60 fill="green"></circle>
      
      <circle cy=78 cx =78 r=12 fill="#dbd876" >
      </circle>
      <circle cy=80 cx =80 r=12 fill="#f7ee79" >
      </circle>
      <circle cy=80 cx =90 r=1 fill="#6b6a63">

</circle>
      <circle cy=80 cx =80 r=1 fill="#6b6a63"></circle>
      <path fill="#6b6a63" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m75,77
               a1,1 0 0,1 5,0
 
               "
            >
        
        <animate attributeName="d" values="
                                           m75,77
               a1,1 0 0,1 5,0;
                                           m80,77
               a1,1 0 0,1 5,0;
                                           m75,77
               a1,1 0 0,1 5,0
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <path fill="#6b6a63" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m85,77
               a1,1 0 0,1 5,0
 
               "
            >
        
        <animate attributeName="d" values="
                                            m85,77
               a1,1 0 0,1 5,0;
                                            m91,77
               a1,1 0 0,1 5,0;
                                            m85,77
               a1,1 0 0,1 5,0;
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      <path fill="#6b6a63" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m81,82
               a1,1 0 1,0 10,0
 
               "
            >
        
        <animate attributeName="d" values="
                                           m81,82
               a1,1 0 1,0 10,0;
                                           m86,82
               a1,1 0 1,0 10,0;
                                           m81,82
               a1,1 0 1,0 10,0;
                                           
                                           " dur="10s" repeatCount="indefinite" />
      </path>
      
      
     
    </svg>
  </body>
</html>