Hello World! (Branch 7689)
✨ NUTTHIDA PLANGKAM
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:Fantasy; } svg{ background:hsl(10, 60%,70%); } </style> </head> <body> <svg viewBox="0 0 40 40"> <defs> <pattern id="redwhite" viewBox="0,0,8,8" width="17%" height="17%"> <rect width="8" height="8" fill="white"></rect> <rect width="4" height="8" fill="#C32027"></rect> </pattern> </defs> <svg> <!-- ถุงข้าง --> <path d=" m30,18 l3 -1 -1 18 -3 3 " fill="#550000"/> </svg> <svg> <!-- ซ้ายสุด --> <circle r="1.5" cx="10" cy="16" fill="#F8F0D8"/> <circle r="1.6" cx="12" cy="14.8" fill="#F9C77E"/> <circle r="1.5" cx="11.5" cy="15" fill="#F8F0D8"/> <circle r="1.3" cx="12" cy="17" fill="#F8F0D8"/> <!-- --> <circle r="1.2" cx="14" cy="12.5" fill="#F8F0D8"/> <circle r="1" cx="15.7" cy="11.7" fill="#F9C77E"/> <circle r="1" cx="15.7" cy="13" fill="#F9C77E"/> <circle r="1.2" cx="15" cy="12" fill="#F8F0D8"/> <circle r="1" cx="15.3" cy="13" fill="#F8F0D8"/> <!-- --> <circle r="1.5" cx="22.8" cy="11.7" fill="#F8F0D8"/> <circle r="1.2" cx="22.5 " cy="14.4" fill="#F9C77E"/> <circle r="1.3" cx="24.3" cy="13.5" fill="#F9C77E"/> <circle r="1.2" cx="22" cy="14" fill="#F8F0D8"/> <circle r="1.3" cx="24" cy="13" fill="#F8F0D8"/> <!-- --> <circle r="1" cx="19" cy="10.4" fill="#F8F0D8"/> <circle r="0.8" cx="18" cy="11" fill="#F8F0D8"/> <circle r="1" cx="20.6" cy="11.3" fill="#F9C77E"/> <circle r="0.9" cx="19.4" cy="12.3" fill="#F9C77E"/> <circle r="0.8" cx="19" cy="12" fill="#F8F0D8"/> <circle r="1.1" cx="20" cy="11" fill="#F8F0D8"/> <!-- --> <g><circle r="1" cx="12" cy="6.4" fill="#F8F0D8"/> <circle r="0.8" cx="11" cy="7" fill="#F8F0D8"/> <circle r="1" cx="13.6" cy="7.3" fill="#F9C77E"/> <circle r="0.9" cx="12.4" cy="8.3" fill="#F9C77E"/> <circle r="0.8" cx="12" cy="8" fill="#F8F0D8"/> <circle r="1.1" cx="13" cy="7" fill="#F8F0D8"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 12 6.4" to="360 12 6.4" dur="3s" repeatCount="indefinite"/></g> <!-- --> <circle r="1" cx="22.5" cy="16.2" fill="#F9C77E"/> <circle r="1" cx="23.4" cy="17" fill="#F9C77E"/> <circle r="1" cx="22" cy="16" fill="#F8F0D8"/> <circle r="1" cx="21" cy="17" fill="#F8F0D8"/> <circle r="0.8" cx="23" cy="17" fill="#F8F0D8"/> <!-- --> <circle r="1.5" cx="14.3" cy="15.4" fill="#F8F0D8"/> <circle r="1.5" cx="14.3" cy="16.4" fill="#F8F0D8"/> <circle r="1.5" cx="16" cy="16" fill="#F8F0D8"/> <circle r="1.7" cx="18.5" cy="15" fill="#F9C77E"/> <circle r="1.5" cx="19.3" cy="17" fill="#F9C77E"/> <circle r="1.5" cx="18" cy="15" fill="#F8F0D8"/> <circle r="1.5" cx="18.5" cy="17" fill="#F8F0D8"/> <!-- --> <circle r="2" cx="27.5" cy="17.5" fill="#F8F0D8"/> <circle r="1.9" cx="31.2" cy="16.5" fill="#F9C77E"/> <circle r="1.5" cx="29" cy="14.5" fill="#F9C77E"/> <circle r="1.8" cx="30.7" cy="16.7" fill="#F8F0D8"/> <circle r="1.6" cx="28.5" cy="15" fill="#F8F0D8"/> <!-- --> <circle r="1.5" cx="26.5" cy="12.5" fill="#F8F0D8"/> <circle r="1.7" cx="25.6" cy="14.5" fill="#F9C77E"/> <circle r="1.6" cx="25.5" cy="14" fill="#F8F0D8"/> <circle r="1" cx="27.5" cy="14.5" fill="#F8F0D8"/> <!-- --> <g><circle r="1.2" cx="25.4" cy="7.5" fill="#F9C77E"/> <circle r="0.9" cx="26.7" cy="8.5" fill="#F9C77E"/> <circle r="1.2" cx="26" cy="7" fill="#F8F0D8"/> <circle r="1" cx="27" cy="8" fill="#F8F0D8"/> <circle r="1.3" cx="27.6" cy="6.5" fill="#F8F0D8"/> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 28.4 5.5" to="0 30.5 5.5" dur="4s" repeatCount="indefinite"/></g> </svg> <svg x="10" y="18"> <!-- ถุง --> <polygon points="0,0 20,0 19,20 1,20" fill="url(#redwhite)" /> <!-- "มุมบนซ้าย-เข้าออก,มุมบนซ้าย-ขึ้นลง มุมบนขวา-เข้าออก,มุมบนขวา-ขึ้นลง มุมล่างขวา-เข้าออก,มุมล่างขวา-ชึ้นลง มุมล่างซ้าย-เข้าออก,มุมล่างซ้าย-ชึ้นลง" --> <!-- <rect width="20" height="20" fill="red" /> --> <path d="m20 0.5 l-1 19.5 -18 0" fill="hsla(1, 70%, 30%, 15%)"></path> </svg> <svg> <!-- ตัวถุง --> <!-- เงาวงกลม --> <circle r="0.85" cx="10.86" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="12.6" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="14.24" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="16" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="17.65" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="19.35" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="21.05" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="22.8" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="24.45" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="26.2" cy=17.6 fill="#BEBEBE"/> <circle r="0.8" cx="27.85" cy=17.6 fill="#BEBEBE"/> <circle r="0.65" cx="29.4" cy=17.6 fill="#BEBEBE"/> <!-- วงกลม --> <circle r="0.85" cx="10.86" cy=18 fill="#C32027"/> <circle r="0.8" cx="12.6" cy=18 fill="white"/> <circle r="0.8" cx="14.24" cy=18 fill="#C32027"/> <circle r="0.8" cx="16" cy=18 fill="white"/> <circle r="0.8" cx="17.65" cy=18 fill="#C32027"/> <circle r="0.8" cx="19.35" cy=18 fill="white"/> <circle r="0.8" cx="21.05" cy=18 fill="#C32027"/> <circle r="0.8" cx="22.8" cy=18 fill="white"/> <circle r="0.8" cx="24.45" cy=18 fill="#C32027"/> <circle r="0.8" cx="26.2" cy=18 fill="white"/> <circle r="0.8" cx="27.85" cy=18 fill="#C32027"/> <circle r="0.65" cx="29.4" cy=18 fill="white"/> </svg> <g> <svg> <!-- ข้าวโพตข้างล่าง --> <circle r="1" cx="7" cy="36.4" fill="#F8F0D8"/> <circle r="0.8" cx="6" cy="37" fill="#F8F0D8"/> <circle r="1" cx="8.6" cy="37.3" fill="#F9C77E"/> <circle r="0.9" cx="7.4" cy="38.3" fill="#F9C77E"/> <circle r="0.8" cx="7" cy="38" fill="#F8F0D8"/> <circle r="1.1" cx="8" cy="37" fill="#F8F0D8"/> </svg> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 7 36.4" to="360 7 36.4" dur="5s" repeatCount="indefinite"/> </g> <svg > <!-- วงกลมสีเหลือง --> <ellipse cx="20" cy="29.6" rx="6" ry="4" fill="hsla(359, 50%, 30%, 20%)"/> <ellipse cx="20" cy="29" rx="6" ry="4" fill="#F9C77E"/> <text x="15.3" y="30" font-size="2.5" fill="#505189">POPCORN</text> </svg> </svg> </body> </html>