เมตตาหนูที

✨ นางสาวกัลยรักษ์ ชุบผา

<html>
<head><title>หมิว กัลยรักษ์ ชุบผา (63070007)</title>
<style>
body{
	margin:0;
    /* overflow: hidden; */
}
svg{
    width:100%;
}
  :root {
      --wingborder: #3b3650;
    	--wing1: #fd5d4f;
  		--wing2: #ff814f;
      --wing3: #fed03d;
      --wing4: #fcc547;
      --wing5: #ec5657;
    	--wing6: #231f2d;
    	--wing7: #B54141;
    	--wing8: #f8844d;
      --dark1: #feb7c5;
    	--dark2: #ed8bb3;
    	--dark3: #ED98B2;
    	--dark4: #A3697A;
    	--tree: #47382d;
    	--tree1: #211b26;
    	--dark5: #ce99ff;
    	--dark6: #b77feb;
    	--dark7: #9f69d1;
    	--dark8: #714599;
    	--wing11: #0786a3;
    	--wing22: #052232;
    	--wing33: #32e8ec;
    	--wing44: #02cad9;
    	--wing55: #02c0f0;
    	--wing77: #0563a0;
    	--wing88: #0d8cb9;
    	
    
		}

#butterfly{
    animation: rotater 20s 780ms ease-out infinite;
  }
  #butterfly2{
    animation: rotater2 20s 780ms ease-out infinite;
  }
   #dark11{
    animation: color1 20s 780ms ease-out infinite;
  }
  #dark22{
    animation: color2 20s 780ms ease-out infinite;
  }
    #dark33{
    animation: color3 20s 780ms ease-out infinite;
  }
  #dark44{
    animation: color4 20s 780ms ease-out infinite;
  }
    #tree1{
    animation: tree 20s 780ms ease-out infinite;
  }
  #wing1{
	 animation: wing1 20s 780ms ease-out infinite;
  }
    #wing2{
	 animation: wing2 20s 780ms ease-out infinite;
  }
    #wing3{
	 animation: wing3 20s 780ms ease-out infinite;
  }
    #wing4{
	 animation: wing4 20s 780ms ease-out infinite;
  }
    #wing5{
	 animation: wing5 20s 780ms ease-out infinite;
  }
    #wing7{
	 animation: wing7 20s 780ms ease-out infinite;
  }
    #wing8{
	 animation: wing8 20s 780ms ease-out infinite;
  }
    #grass{
	animation: grass 20s 780ms ease-out infinite;
  }
    #grass1{
	animation: grass 20s 780ms ease-out infinite;
  }
  #cloud{
	animation: cloud 20s 780ms ease-out infinite;
  }
    #cloud1{
	animation: cloud1 20s 780ms ease-out infinite;
  }
    #cloud2{
	animation: cloud2 20s 780ms ease-out infinite;
  }
  #petal{
	filter:drop-shadow(1px 1px 2px hsla(286, 93%, 83%, 1));
 	transition:2s
  }
  #sun{
	animation: sun 20s 780ms ease-out infinite;
  filter:drop-shadow(1px 1px 2px rgb(255, 254, 197));
 	transition:2s
  }

#butterfly:hover{
      filter:drop-shadow(0px 0px 10px rgb(248, 224, 255));
 		transition:2s
  }
  
  #butterfly1:hover{
      filter:drop-shadow(0px 0px 30px white);
 		transition:2s
  }
  
  @keyframes rotater{

0% {transform: translate(2,0) scale(0.7);}
    50% {transform: translate(0,0) scale(0.5);}
    100% {transform: translate(2,0) scale(0.2);}
  }
  
  @keyframes rotater2{

0% {transform: rotate(20deg,0deg)  scale(0.3);}
    50% {transform: rotate(0deg,0deg)  scale(0.2);}
    100% {transform: rotate(20deg,0deg) scale(0.1);}
  }
  
  @keyframes color1{

0% {fill: var(--dark1);}
    50% {fill: var(--dark5);}
    100% {fill: var(--dark1);}
  }
  
    @keyframes color2{

0% {fill: var(--dark2);}
    50% {fill: var(--dark6);}
    100% {fill: var(--dark2);}
  }
  
    @keyframes color3{

0% {fill: var(--dark3);}
    50% {fill: var(--dark7);}
    100% {fill: var(--dark3);}
  }
  
    @keyframes color4{

0% {fill: var(--dark4);}
    50% {fill: var(--dark8);}
    100% {fill: var(--dark4);}
  }
  
      @keyframes tree{

0% {fill: var(--tree1);}
    50% {fill: var(--tree2);}
    100% {fill: var(--tree1);}
  }
  
      @keyframes wing1{

0% {fill: var(--wing1);}
    50% {fill: var(--wing11);}
    100% {fill: var(--wing1);}
  }
        @keyframes wing2{

0% {fill: var(--wing2);}
    50% {fill: var(--wing22);}
    100% {fill: var(--wing2);}
  }
        @keyframes wing3{

0% {fill: var(--wing3);}
    50% {fill: var(--wing33);}
    100% {fill: var(--wing3);}
  }
        @keyframes wing4{

0% {fill: var(--wing4);}
    50% {fill: var(--wing44);}
    100% {fill: var(--wing4);}
  }
        @keyframes wing5{

0% {fill: var(--wing5);}
    50% {fill: var(--wing55);}
    100% {fill: var(--wing5);}
  }
        @keyframes wing7{

0% {fill: var(--wing7);}
    50% {fill: var(--wing77);}
    100% {fill: var(--wing7);}
  }
        @keyframes wing8{

0% {fill: var(--wing8);}
    50% {fill: var(--wing88);}
    100% {fill: var(--wing8);}
  }

@keyframes grass{
		0% {fill:  #82C89C;}
    50% {fill: #206e43 ;}
    100% {fill: #82C89C ;}
  }
  
     @keyframes cloud{
		0% {transform: translateX(-20px) translateY(5px);}
    50% {transform: translateX(0px) translateY(0px);}
    100% {transform: translateX(-20px) translateY(5px);}
  }
  
    @keyframes cloud1{
		0% {transform: translateX(22px) translateY(-5px);}
    50% {transform: translateX(0px) translateY(0px);}
    100% {transform: translateX(22px) translateY(-5px);}
  } 
  
      @keyframes cloud2{
		0% {transform: translateX(35px) translateY(-5px) scale(1.5);}
    50% {transform: translateX(0px) translateY(0px) scale(1.5);}
    100% {transform: translateX(15px) translateY(-3px) scale(1.5);}
  } 
  @keyframes sun{
		0% {transform: translateX(0px) translateY(-20px);}
    50% {transform: translateX(0px) translateY(0px);}
    100% {transform: translateX(0px) translateY(-20px);}
  }
</style>
</head>
<body>
<svg viewBox="0 0 100 100">
      <defs>
        <pattern id="isometric" width="10" height="5" viewBox="0 0 10 5" patternUnits="userSpaceOnUse" x="0" y="0" >
          <g stroke="#0004" stroke-dasharray="2 1" stroke-width=".25">
            <path d="m0,0 v100"/>
            <path d="m10,0 v100"/>
          </g>
          <path d="m5,0 v100" stroke-width=".25" stroke="#0004" stroke-dasharray=".5"/>
          <g stroke-width=".25" stroke="#0004">
            <path d="m0,0 l10,5"/>
            <path d="m10,0 l-10,5"/>
          </g>
        </pattern>
        
    	<linearGradient id="skyGradient" x1="100%" y1="100%">
          <stop offset="0%" stop-color="lightblue" stop-opacity=".5">
            <animate attributeName="stop-color" values="lightblue;blue;red;red;black;red;red;purple;lightblue" dur="25s" repeatCount="indefinite" />
          </stop>
          <stop offset="100%" stop-color="lightblue" stop-opacity=".5">
            <animate attributeName="stop-color" values="#0a0087;#324ee3;purple;purple;black;purple;purple;blue;lightblue" dur="25s" repeatCount="indefinite" />
            <animate attributeName="offset" values=".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95" dur="14s" repeatCount="indefinite" />
          </stop>
        </linearGradient>
      </defs>

</svg>
<img src="https://imgur.com/TOCoJXw.png">
<img src="https://media.discordapp.net/attachments/806810330801897472/840420793337774080/unknown.png">
</body>
</html>