HW-SVG 1 Sec A Jeremy ใบปอ-ชาติณโยดม

✨ นายชาติณโยดม วิบูลย์พานิช

<html>
  <head>
    <title>SVG
    </title>
    <style>
      body{
        background:#666;
        margin:0em;
        margin-top:2em;
        font-family:sans-serif;
      }
      svg{
        background:#FFEBCA;
        width:90vmin;
        height:90vmin;
        display:block;
        margin:auto;
        box-shadow:0px 0px 10px #0006;
      }
      .plant1{
			animation: seaw 1s infinite alternate;
      }
      .plant2{
			animation: seaw2 1s infinite alternate;
      }
      .bubble{
			opacity: 50%;
        animation: bubbles 3s infinite linear;
      }
      .bubble2{
			opacity: 50%;
        animation: bubbles2 3s infinite linear;
      }
      .fish1{
			animation: fish1 5s infinite alternate linear;
      }
      .fish2{
			animation: fish2 5s infinite alternate linear;
      }
      .sakura{
			position: absolute;
        top: 500px;
        left: 15%;
      }
      @keyframes seaw{
        from{
				transform: rotatey(0deg);
          	transform-origin: center bottom;
        }
        to{
				transform: rotatey(20deg);
          	transform-origin: center bottom;
        }
      }
      
      @keyframes seaw2{
        from{
				transform: rotatey(20deg);
          	transform-origin: center bottom;
        }
        to{
				transform: rotatey(0deg);
          	transform-origin: center bottom;
        }
      }
      
      @keyframes bubbles{
        0%{
				transform: translate(0px, 0px);
          opacity: 0%;
        }
        10%{
				opacity: 50%;
        }
        25%{
				transform: translate(1px, -1px);
          	opacity: 40%;
        }
        50%{
				transform: translate(-1px, -2px);
          opacity: 30%;
        }
        75%{
				transform: translate(0px, -3px);
          opacity: 20%;
        }
        100%{
				transform: translate(2px, -4px);
          opacity: 0%;
        }
      }
      @keyframes bubbles2{
			0%{
				transform: translate(0px, 0px);
           opacity: 0%;
        }
        10%{
				opacity: 50%;
        }
        25%{
				transform: translate(-1px, -1px);
          	opacity: 40%;
        }
        50%{
				transform: translate(1px, -2px);
          opacity: 30%;
        }
        75%{
				transform: translate(0px, -3px);
          opacity: 20%;
        }
        100%{
				transform: translate(-2px, -4px);
          opacity: 0%;
        }
      }
        @keyframes fish1{
          0%{
					transform: translate(0px,0px);
          }
          25%{
					transform: translate(5px,2px);
          }
          50%{
					transform: translate(7px,10px);
          }
          75%{
					transform: translate(0px,12px);
          }
          100%{
					transform: translate(-4px,15px);
          }
        }
      @keyframes fish2{
        50%{
				transform: translate(30px,0px);
        }
        100%{
				transform: translate(0px,0px);
        }
      }
    </style>
  </head>
  <body>
    <h1>
      รักน้ำ รักปลา รักซากุระ
    </h1>
    <svg viewBox="0 0 100 100">
      <rect height=20 width=100 y=80 fill=#B9B9B9></rect>
      <rect height="70" width="70" x=15 y=15 fill="#ABFFFE"></rect>
      
      <polygon points="15,70 50,65 85,70 50,75" fill="#F5CC95"></polygon>

      <ellipse class="fish2" cx="50" cy="50" rx="3" ry="1.5" fill="salmon"></ellipse>
      <polygon  class="fish2" points="52,50 54,49 54,51" fill="salmon"></polygon>
      <path d="M47 50 c 53 50" fill="black"></path>
      <polygon class="fish1" points="40,30 43,27 46,30 47,29 47,31 46,30 43,33" fill="salmon"></polygon>

      <path class="plant2" d="M23 30 S30 30 27 70Z"  fill="green"></path>
      <path class="plant1" d="M30 40 S23 30 35 70Z"  fill="green"></path>
      <path class="plant1"d="M70 30 S60 30 55 70Z"  fill="green"></path>
      <path class="plant2"d="M83 60 S83 50 70 70Z"  fill="green"></path>
      <path class="plant1"d="M77 50 S66 50 60 73Z"  fill="green"></path>
      <circle class="bubble2" cx="30" cy="50" r="2" fill="aqua"></circle>
      <circle class="bubble" cx="40" cy="60" r="2" fill="aqua"></circle>
      <circle class="bubble2" cx="20" cy="22" r="2" fill="aqua"></circle>
      <circle class="bubble" cx="70" cy="67" r="2" fill="aqua"></circle>
      <circle class="bubble2" cx="60" cy="50" r="2" fill="aqua"></circle>
      <circle class="bubble" cx="74" cy="23" r="2" fill="aqua"></circle>
      <circle class="bubble2" cx="47" cy="22" r="2" fill="aqua"></circle>


      <line x1="50" y1="15" x2="50" y2="75" style="stroke:rgb(200,200,255);stroke-width:0.3" />
      <line x1="15" y1="20" x2="15" y2="70" style="stroke:rgb(200,200,255);stroke-width:0.3" />
      <line x1="85" y1="20" x2="85" y2="70" style="stroke:rgb(200,200,255);stroke-width:0.3" />
      <polygon points="15,70 50,75 85,70 85,90 50,95 15,90" fill="#904F06"></polygon>
      <polygon points="15,10 50,5 85,10 85,20 50,15 15,20" fill="#904F06"></polygon>
      <polyline points="28,10.3 23,11 23,14 28,13.7 28,17 23,17" stroke="#C08C2A" stroke-width="1" fill="none"></polyline>
      <polyline points="35,10.3 30,11 30,17 35,16.7 35,10.3" stroke="#C08C2A" stroke-width="1" fill="none"></polyline>
      <polyline points="60,10 55,9 55,14 60,14.5" stroke="#C08C2A" stroke-width="1" fill="none"></polyline>
      <polyline points="62,10 62,15 67,15.6 67,10.6" stroke="#C08C2A" stroke-width="1" fill="none"></polyline>
      <polyline points="69,11 74,11.5 71.5,11.2 71.5,16.2" stroke="#C08C2A" stroke-width="1" fill="none"></polyline>
      <polyline points="77,12 82,12.3 77,12 77,15 82,15.3 77,15 77,17 82,17.5" stroke="#C08C2A" stroke-width="1" fill="none"></polyline>

      <pattern id="image2" height="100%" width="100%" viewBox="0 0 100 100">
      <image width="100" height="100" xlink:href="https://www.pcn.co.th/wp-content/uploads/2021/07/packall-01_edited.png"/>  
    </pattern>
      <rect id="salmon_1" fill="url(#image2)" x="4" y="67" width="40" height="40" stroke="#4f4f4f" stroke-width="0"></rect>

      
    </svg>
    
  </body>
</html>