Hello World! (Copy 4947) (Branch 5148) (Copy 5188)
✨ Peerawit Kongkitkul
<style> body{ margin:2em; background:#303030; } svg{ background:white; } #ear-right{ transform: rotate(-30deg); } #ear-left{ transform: rotate(30deg); } .cat.face{ fill: rgb(172, 172, 172); } .cat.eye{ fill: rgb(2, 224, 240); stroke: white; stroke-width: 0.25px; } .cat.nose{ fill: rgb(255, 90, 173); } .cat.whisker{ stroke:rgb(44, 44, 44); stroke-width: 0.1px; } </style> <svg viewBox="0 0 100 60"> <!-- Grid View--> <rect fill="#b5b7a3" width="20" height="20"/> <rect fill="#d7d8d0" width="20" height="20" y="20"/> <rect fill="#b5b7a3" width="20" height="20" y="40"/> <rect fill="#d7d8d0" width="20" height="20" x="20"/> <rect fill="#b5b7a3" width="20" height="20" y="0" x="40"/> <rect fill="#d7d8d0" width="20" height="20" y="0" x="60"/> <rect fill="#b5b7a3" width="20" height="20" y="0" x="80"/> <rect fill="#b5b7a3" width="20" height="20" y="20" x="20"/> <rect fill="#d7d8d0" width="20" height="20" y="40" x="20"/> <rect fill="#d7d8d0" width="20" height="20" y="20" x="40"/> <rect fill="#b5b7a3" width="20" height="20" y="20" x="60"/> <rect fill="#d7d8d0" width="20" height="20" y="20" x="80"/> <rect fill="#b5b7a3" width="20" height="20" y="40" x="40"/> <rect fill="#d7d8d0" width="20" height="20" y="40" x="60"/> <rect fill="#b5b7a3" width="20" height="20" y="40" x="80"/> <!-- Top's cat --> <!--This is the face of the cat--> <ellipse class="cat face" cx="10" cy="13" rx="5" ry="4"></ellipse> <polygon class="cat face" points="5,13 5,6 10,13"></polygon> <polygon class="cat face" points="15,13 15,6 10,13"></polygon> <!--This is the eye of the cat--> <ellipse class="cat eye" cx="8" cy="11.5" rx="0.7" ry="0.7"></ellipse> <ellipse class="cat eye" cx="12" cy="11.5" rx="0.7" ry="0.7"></ellipse> <!--This is the nose of the cat--> <ellipse class="cat nose" cx="10" cy="13.5" rx="0.8" ry="0.6"></ellipse> <!--This is the whisker of the cat--> <line class="cat whisker" x1="9" y1="13.25" x2="6.8" y2="12.5"></line> <line class="cat whisker" x1="9" y1="13.6" x2="6.5" y2="13.6"></line> <line class="cat whisker" x1="9" y1="13.9" x2="6.8" y2="14.5"></line> <line class="cat whisker" x1="11" y1="13.25" x2="13" y2="12.5"></line> <line class="cat whisker" x1="11" y1="13.6" x2="13.3" y2="13.6"></line> <line class="cat whisker" x1="11" y1="13.9" x2="13" y2="14.5"></line> <!-- kaem's cow --> <svg width="27" height="27" y="-3" x="76.7" viewbox="0 0 100 100"> <polygon points="30,15 40,40 60,30" fill="#e2e2e2"/> <polygon points="70,15 60,38 40,30" fill="#e2e2e2"/> <ellipse id="ear-right"cx="10" cy="44" fill="#d8d3ca" rx="5" ry="10"/> <ellipse id="ear-left" cx="76" cy="-5" fill="#d8d3ca" rx="5" ry="10"/> <rect x="27" y="20" rx="20" ry="17" width="45" height="60" fill="#f7f4ef"/> <polygon points="25,60 27,50 40,40" fill="#f7f4ef"/> <polygon points="74.4,59 66,60 70,44" fill="#f7f4ef"/> <rect x="24.5" y="49" rx="20" ry="20" width="50" height="22" fill="#fddbc7"/> <circle cx="43" cy="60" r="2" fill="#2d2d2d"/> <circle cx="55" cy="60" r="2" fill="#2d2d2d"/> <ellipse cx="41" cy="44" fill="#2d2d2d" rx="3" ry="4"/> <ellipse cx="57" cy="44" fill="#2d2d2d" rx="3" ry="4"/> </svg> <!-- NEAY's PIG --> <circle cx="85" cy="25" r="3" fill="#FFA5DC" /> <circle cx="85" cy="25" r="2" fill="#FF7E9D" /> <circle cx="95" cy="25" r="3" fill="#FFA5DC" /> <circle cx="95" cy="25" r="2" fill="#FF7E9D" /> <circle cx="90" cy="31" r="7.5" fill="#FFA5DC" /> <ellipse cx="90" cy="32.5" rx="4" ry="3" fill="#FF7E9D" /> <ellipse cx="93" cy="28" rx="1" ry="1.5" fill="black" /> <ellipse cx="87" cy="28" rx="1" ry="1.5" fill="black" /> <circle cx="93" cy="28.3" r="0.5" fill="white" /> <circle cx="87" cy="28.3" r="0.5" fill="white" /> <circle cx="88.5" cy="32.5" r="1" fill="#FFA5DC" /> <circle cx="91.5" cy="32.5" r="1" fill="#FFA5DC" /> <ellipse cx="83.5" cy="32.5" rx="2" ry="1.5" fill="#FF6A89" /> <ellipse cx="96.5" cy="32.5" rx="2" ry="1.5" fill="#FF6A89" /> </svg>