63070001

✨ KOTCHAKORN KAJONCHAI

<html>
  <head>
    <title>เจน กชกร เขจรไชย (63070001)
    </title>
    <style>
      body{
        background:#9DB6B5;
        margin:0;
        font-family:sans-serif;
      }
      svg{
        width: 100%;
      }
      @keyframes star_wibwab{
        0%{
          opacity: 0.5;
        }
        0%{
          opacity: 0.1;
        }
      }
      .star{
        position:absolute;
        width: 1px;
        height: 1px;
        background: hsl(60, 97%, 83%);
        opacity: 1;
        box-shadow:0px 0px 2px 2px hsla(60, 97%, 83%, 0.2);
      }
      .star:nth-child(1){
        	top: 15vw;
        	left: 30vw;
        	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(2){
        	top: 12vw;
        	left: 20vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(3){
       	top: 23vw;
        	left: 12vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(4){
        	top: 16vw;
        	left: 14vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(5){
        	top: 20vw;
        	left: 18vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(6){
        	top: 11vw;
        	left: 11vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(7){
        	top: 11.5vw;
        	left: 35vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(8){
        	top: 16vw;
        	left: 24vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(9){
        	top: 20vw;
        	left: 26vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(10){
        	top: 21vw;
        	left: 31vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(11){
        	top: 17vw;
        	left: 37vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(12){
        	top: 14vw;
        	left: 40vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(13){
        	top: 12vw;
        	left: 43vw;
      	animation: star_wibwab 1s infinite alternate;}
      .star:nth-child(14){
        	top: 19vw;
        	left: 42vw;
      	animation: star_wibwab 1s infinite alternate;}
      #dog{
        opacity: 0.2;
        transition: 0.5s;
      }
      #dog:hover{
        opacity: 1;
        transform: scale(1.2,1.2);
      }
      :root {
      --dark1: hsl(180, 1%, 52%);
  		--dark2: hsl(200, 2%, 63%);
      --dark3: hsl(210, 1%, 67%);
      --dark4: hsl(195, 3%, 72%);
      --dark5: hsl(190, 5%, 78%);
      --dark6: hsl(180, 8%, 95%);
		}
    </style>
  </head>
  <body>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <svg viewBox="0 0 100 100">
      <g></g>

      <g>
      	<path fill="hsl(238, 8%, 7%)" stroke="#253746" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
               d="M10,10 h17.5 v30 h-17.5 v-30
                  M27.5,10 h17.5 v30 h-17.5 v-30"
               ></path>
         <path fill="hsl(60, 97%, 83%)">
           <animate attributeName="d" values="
             M15,10 L17.5,10 L24,22 L26,24;
             M24,22 L26,24 L40,40 L38,40;
             " dur="1s" repeatCount="indefinite"></animate></path>
         <path fill="hsl(60, 97%, 83%)">
           <animate attributeName="d" values="
             M15,25 L16,26 L19,30 L18,30;
             M18,30 L19,30 L22,36 L21,35 ;
             " dur="1s" repeatCount="indefinite"></animate></path>
         <path fill="hsl(60, 97%, 83%)">
           <animate attributeName="d" values="
             M32,17 L33,18 L36,23 L35,23;
             M35,23 L36,23 L42,28 L41,27 ;
             " dur="1s" repeatCount="indefinite"></animate></path>
        	<line x1="27.5" y1="10" x2="27.5" y2="40" stroke="#253746" stroke-width="0.5"></line>
      </g>

<g>
        <path fill="#e2896c"
            d="M0,100
               a1,1 0 1,1 100,100"></path>
        <path fill="#efdbb2"
            d="M5,100
               a1,1 0 1,1 90,90"></path>
        <path fill="#f7f6f3"
            d="M20,90 L30,100 L5,100
               M40,83 L55,83 L56,87 L30,100
               M72,86 L94,100 L70,100"></path>
        <path fill="#253746"
            d="M20,90 L40,83 L30,100
               M55,83 L72,86 L70,100 L60,100"></path>
        <path fill="#e2896c"
            d="M56,87 L60,100 L30,100"></path>
      </g>

      <g id="dog">
        	<path fill="var(--dark2)"
            d="M35,35 L43,30 L37,40
               M65,35 L57,30 L63,40
               M43,39 L50,35 L47,41 L41,45
               M57,39 L50,35 L53,41 L59,45
               M50,43 L46,46 L48,47
               M50,43 L54,46 L52,47
               M43,53 L35,61 L46,58
               M57,53 L65,61 L54,58
               M43,63 L40,64 L37,71 L38,77 L45,73
               M57,63 L60,64 L63,71 L62,77 L55,73
               M38,79 L34,83 L39,83
               M62,79 L66,83 L61,83
               M35,87 L33,89 L34,91 L35,91
               M65,87 L67,89 L66,91 L65,91
               M48,89 L49.5,92 L46,92
               M52,89 L50.5,92 L54,92"></path>
			<path fill="var(--dark3)"
            d="M43,30 L57,30 L55,35 L45,35
               M37,40 L38.9,37 L43,39 L40,47
               M63,40 L61.3,37 L57,39 L60,47
               M50,35 L47,41 L50,43
               M50,35 L53,41 L50,43
               M50,43 L48,47 L50,47
               M50,43 L52,47 L50,47
               M46,46 L44,55 L46,58
               M54,46 L56,55 L54,58
               M40,32 L31,28 L29,38 L34,43 L35,35 L40,32
               M60,32 L69,28 L71,38 L66,43 L65,35 L60,32
               M50,60 L43,63 L48,89 L52,89 L57,63 M50,60
               M39,83 L34,83 L34,86 L35,87
               M61,83 L66,83 L66,86 L65,87
               M40,89 L39,91 L35,91
               M60,89 L61,91 L65,91
               M46,92 L42,92 L43,89
               M54,92 L58,92 L57,89"></path>
			<path fill="var(--dark4)"
            d="M40,47 L46,46 L44,55
               M60,47 L54,46 L56,55
               M38.9,37 L43,30 L45,35 L43,39 L38.9,37
               M61.3,37 L57,30 L55,35 L57,39 L61.3,37
               M50,43 L47,41 L41,45 L47,45
               M50,43 L53,41 L59,45 L53,45
               M35,35 L34,43 L37,41 L35,35
               M65,35 L66,43 L63,41 L65,35
               M42,59 L35,61 L37,71
               M58,59 L65,61 L63,71
               M38,77 L40,89 L48,89 L40,76
               M62,77 L60,89 L52,89 L60,76
               M46,92 L43,89 L48,89
               M54,92 L57,89 L52,89"></path>
			<path fill="var(--dark5)"
            d="M45,35 L50,35 L43,39
               M55,35 L50,35 L57,39
               M41,45 L47,45 L46,46 L40,47
               M59,45 L53,45 L54,46 L60,47
               M46,58 L42,59 L40,64 L50,60
               M54,58 L58,59 L60,64 L50,60
               M45,73 L40,76 L43,89 L48,89
               M55,73 L60,76 L57,89L52,89
               M39,83 L35,87 L35,91 L40,89 L40,88 L39,83
               M61,83 L65,87 L65,91 L60,89 L60,88 L61,83"></path>
			<path fill="var(--dark6)"
            d="M46,46 L48,47 L50,47 L52,47 L54,46 L54,58 L50,60 L46,58 L46,46"></path>

			<circle r="1" fill="black" cx="43" cy="40"/>
			<circle r="1" fill="black" cx="57" cy="40"/>
        	<circle r="0.3" fill="white" cx="43.5" cy="40"/>
        	<circle r="0.3" fill="white" cx="57.5" cy="40"/>

			<path fill="hsl(0, 0%, 23%)"
            d="M48,47 L52,47 L50,53
               M50,53 L47,54 L47,55 L50,54
               M50,53 L53,54 L53,55 L50,54"></path>
      </g>
    </svg>
  </body>
  
</html>