Recaption! SVG Curve (Branch 7417) (Copy 7889)

✨ นางสาวขวัญพิชชา อิ่มโดด

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#333;
        margin:1em;
        font-family:sans-serif;
      }
      svg{
        background:hsl(30,50%,85%);
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      
      <path stroke="hsl(10,50%,50%)" stroke-width="2" fill="hsl(10,50%,50%)"  stroke-linejoin="round" stroke-linecap="round"
            d=" m21 9 h58 v7 h7 v68 h-7 v7 h-58 v-7 h-7 v-68 h7 v-7 "
            ></path>

      <path stroke="hsl(210,55%,20%)" stroke-width="2" stroke-linecap="round"
            d="M49 25 q0,0 8,0
               M69 45 q0,0 6,0
               M20 23 q0,0 6,0
               M75 18 q0,0 2,0
               M25 33 q0,0 13,0
               M22 48 q0,0 8,0
               M35 16 q0,0 2,0"
            >
      <animate 
                 attributeName="d" 
                 values="
                         M49 25 q0,0 8,0
               			 M69 45 q0,0 6,0
               			 M20 23 q0,0 6,0
               			 M75 18 q0,0 2,0
               			 M25 33 q0,0 13,0
               			 M22 48 q0,0 8,0
               			 M35 16 q0,0 2,0
                         ;
                         M54 25 q0,0 8,0
               			 M75 45 q0,0 6,0
               			 M27 23 q0,0 6,0
               			 M81 18 q0,0 2,0
               			 M33 33 q0,0 13,0
               			 M31 48 q0,0 8,0
               			 M45 16 q0,0 2,0
                         ;
                         M49 25 q0,0 8,0
               			 M69 45 q0,0 6,0
               			 M20 23 q0,0 6,0
               			 M75 18 q0,0 2,0
               			 M25 33 q0,0 13,0
               			 M22 48 q0,0 8,0
               			 M35 16 q0,0 2,0
                         " dur="4s" 
                 repeatCount="indefinite" /></path>

       <path stroke="hsl(30,55%,85%)" stroke-width="1" fill="transparent"
            d="M25,81 
               c4,0 2,-4 4,0
               0,0 2,3 4,-0.5
               0,-0.5 0,2 3,2

M40,86
               c5,0 3,-4 4.7,0
               1,2 3,2 4,0
               2,3 6,0 4,1

M73,80
               c5,0 3,-3 6,0
               3,1 2,1 0,0
               
               M58,84 q1,3 5,-1 q3,3 6,0 q1,3 4,1  
               "/>

<svg>
        <animate attributeName="y" 
                   values="4;5;4" dur="3s" repeatCount="indefinite" />
        <animate attributeName="x" 
                   values="15;-15;15" dur="14s" repeatCount="indefinite" />
        
        <g id="boat" transform="scale(0.9) translate(4 8)">
      <path fill="hsl(210,55%,20%)"  stroke-linejoin="round" stroke-linecap="round"
            d="m35 79 c-35,-30 45,-5 25,0"
            ></path>
      <path fill="hsl(210,55%,20%)"  stroke-linejoin="round" stroke-linecap="round"
            d="m70.5 79 c30,-15 -67,-0 -15,0"
            ></path>
       <path fill="hsl(210,55%,20%)"  stroke-linejoin="round" stroke-linecap="round"
            d="m28 67 q1,-5 48,6.5"
            ></path>
        <path fill="hsl(210,55%,20%)"  stroke-linejoin="round" stroke-linecap="round"
            d="m52 69 q10,7 18,3"
            ></path>
          </g>
      
       <g transform="rotate(2,-350,450) scale(0.8)">
       <path fill="hsl(30,55%,85%)" stroke="hsl(30,55%,85%)" stroke-linejoin="round" stroke-linecap="round"
            d=" m50 34 l-1 30 30 5 l-29 -35
                m-3 -10 l-1 39 -33 -4 l34 -35" 
            ></path>
        </g>
        </svg>
      
      
      

      <svg>
      <animate attributeName="y" 
                   values="-5;-1;-5" dur="8s" repeatCount="indefinite" />
      <g id="balloon" transform="translate(40 -5)">
      <path fill="hsl(30,55%,85%)"
            d=" m30 39 c-20,-20 23,-20 3,0" 
            ></path>
      <path fill="hsl(210,55%,25%)"
            d=" m30 39 c-15,-20.3 14,-19 .4,0
                m2.3 0 c-15,-21 15,-19 .4,0"
            ></path>
        <path fill="hsl(30,55%,85%)"
            d=" m30.5 39 c-10,-21 11,-20 2,0" 
            ></path>
        <path fill="hsl(210,55%,25%)"
            d=" m31 39 c-5,-21 5,-20 .8,0"
            ></path>
      <path stroke="hsl(210,55%,25%)" stroke-width=".3" fill="#0000" stroke-linejoin="round" stroke-linecap="round"
            d=" m30 39.2 l1 2 1 0 l1 -2 "
            ></path>
      <path fill="hsl(30,55%,85%)" stroke-width=".5" stroke="hsl(30,55%,85%)" stroke-linejoin="round" stroke-linecap="round"
            d=" m30 40.2 l1 2 1 0 l1 -2 h-3"
            ></path>
        </g>
      </svg>
      
      
      <defs>
        <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%">
          <rect fill="#0001" width="1" height="10" x="1" y="0"/>
          <rect fill="#0001" width="1" height="10" x="3" y="0"/>
          <rect fill="#0001" width="1" height="10" x="5" y="0"/>
          <rect fill="#0001" width="1" height="10" x="7" y="0"/>
          <rect fill="#0001" width="1" height="10" x="9" y="0"/>
          <rect fill="#0001" width="10" height="1" x="0" y="1"/>
          <rect fill="#0001" width="10" height="1" x="0" y="3"/>
          <rect fill="#0001" width="10" height="1" x="0" y="5"/>
          <rect fill="#0001" width="10" height="1" x="0" y="7"/>
          <rect fill="#0001" width="10" height="1" x="0" y="9"/>
          <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/>
          <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/>
          <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/>
          <rect fill="#0002" width="10" height=".1" x="0" y="0"/>
          <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/>
          <rect fill="#0002" height="10" width=".1" y="0" x="0"/>
        </pattern>
      </defs>


      
    </svg>
    <br>
    <br>
    <svg viewBox="0 0 100 100">
      <path stroke="hsl(210,55%,25%)" stroke-width=".7" fill="hsl(210,55%,25%)" 
            d="
               m10,70
               q5,-20 10,0
               t10,0
               t10,0
               t10,0
               t10,0
               t10,0
               t10,0
               t10,0
               "
            ><animate 
            attributeName="d" 
            values="
            m10,70
            q5,-20 10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
        ;
        		m10,70
            q5,10 10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
        ;
        		m10,70
            q5,-20 10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
            t10,0
          " dur="6.5s" 
          repeatCount="indefinite" /></path>