SVG HW GroupC P’ SSPIM
✨ นายปรัชญา ดอกบัว
<html> <head> <style> body{ background:black; margin:1em; } svg{ background:hsl(170, 95%, 93%); } </style> </head> <body> <svg viewBox="0 0 40 40"> <!--feet--> <linearGradient id="red" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="40%" style="stop-color:hsl(351, 84%, 55%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(344, 84%, 20%);stop-opacity:1" /> </linearGradient> <ellipse cx="10" cy="31" rx="8" ry="5" fill="url(#red)"/> <ellipse cx="30" cy="31" rx="8" ry="5" fill="url(#red)"/> <!--body--> <linearGradient id="pink" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="40%" style="stop-color:hsl(339, 50%, 81%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(345, 80%, 70%);stop-opacity:1" /> </linearGradient> <linearGradient id="pink1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="40%" style="stop-color:hsl(339, 50%, 81%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(339, 50%, 90%);stop-opacity:1" /> </linearGradient> <linearGradient id="pink2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="40%" style="stop-color:hsl(345, 80%, 70%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(339, 50%, 81%);stop-opacity:1" /> </linearGradient> <circle cx="6" cy="20" r="4" fill="url(#pink)"/> <circle cx="34" cy="20" r="4" fill="url(#pink)"/> <circle cx="20" cy="20" r="15.1" fill="url(#pink1)"/> <circle cx="20.1" cy="20.1" r="15" fill="url(#pink)"/> <!--eyes--> <ellipse cx="26.8" cy="15.2" rx="1.5" ry="3" fill="url(#pink1)"/> <ellipse cx="19.8" cy="15.2" rx="1.5" ry="3" fill="url(#pink1)"/> <ellipse cx="27.2" cy="14.9" rx="1.5" ry="3" fill="url(#pink2)"/> <ellipse cx="20.2" cy="14.9" rx="1.5" ry="3" fill="url(#pink2)"/> <ellipse cx="27" cy="15" rx="1.5" ry="3" fill="hsl(250, 10%, 20%)"/> <ellipse cx="20" cy="15" rx="1.5" ry="3" fill="hsl(250, 10%, 20%)"/> <linearGradient id="eye" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="40%" style="stop-color:hsl(250, 10%, 20%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(250, 80%, 30%);stop-opacity:1" /> </linearGradient> <ellipse cx="27" cy="15" rx="1.2" ry="2.7" fill="url(#eye)"/> <ellipse cx="20" cy="15" rx="1.2" ry="2.7" fill="url(#eye)"/> <ellipse cx="27" cy="13.5" rx="0.9" ry="1.3" fill="hsl(250, 10%, 100%)"/> <ellipse cx="20" cy="13.5" rx="0.9" ry="1.3" fill="hsl(250, 10%, 100%)"/> <!--mouth--> <linearGradient id="mouth" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="30%" style="stop-color:hsl(339, 50%, 20%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(344, 84%, 30%);stop-opacity:1" /> </linearGradient> <ellipse cx="24.1" cy="20.9" rx="1" ry="1.3" fill="url(#pink2)"/> <ellipse cx="24" cy="21" rx="0.9" ry="1.3" fill="url(#mouth)"/> <!--cheeks--> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="0.1" /> </filter> <ellipse cx="15" cy="19" rx="3" ry="1.3" fill="hsl(339, 70%, 70%)" filter="url(#f1)"/> <ellipse cx="31.7" cy="19" rx="3" ry="1.3" fill="hsl(339, 70%, 70%)" filter="url(#f1)"/> <text x="2" y="39" fill="black" style="font-size:3;font-weight:bold;">วนัชพร ศิลารวม 63070154</text> <!-- Grid --> <defs> <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%"> <rect fill="#0001" width="1" height="10" x="1" y="0"/> <rect fill="#0001" width="1" height="10" x="3" y="0"/> <rect fill="#0001" width="1" height="10" x="5" y="0"/> <rect fill="#0001" width="1" height="10" x="7" y="0"/> <rect fill="#0001" width="1" height="10" x="9" y="0"/> <rect fill="#0001" width="10" height="1" x="0" y="1"/> <rect fill="#0001" width="10" height="1" x="0" y="3"/> <rect fill="#0001" width="10" height="1" x="0" y="5"/> <rect fill="#0001" width="10" height="1" x="0" y="7"/> <rect fill="#0001" width="10" height="1" x="0" y="9"/> <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/> <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/> <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/> <rect fill="#0002" width="10" height=".1" x="0" y="0"/> <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/> <rect fill="#0002" height="10" width=".1" y="0" x="0"/> </pattern> </defs> <!--<rect fill="url(#grid)" width="1000" height="1000" x="0" y="0"/>--> </svg> -------------------------------------------------------------------------- <svg viewBox="0 0 50 50"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#f67ca4;stop-opacity:0.8" /> <stop offset="100%" style="stop-color:#f67ca4;stop-opacity:1" /> </radialGradient> </defs> <circle cx="25" cy="20" fill="url(#grad1)" r="15"></circle> <ellipse cx="18" cy="22" rx="5" ry="6" fill="#f581a6" transform="rotate(15)"/> <defs> <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#dd1252;stop-opacity:1" /> <stop offset="100%" style="stop-color:#860025;stop-opacity:1" /> </linearGradient> </defs> <circle cx="18" cy="30" fill="url(#grad2)" r="5"></circle> <ellipse cx="44" cy="16" rx="5" ry="7" fill="url(#grad2)" transform="rotate(15)"/> <ellipse cx="18" cy="18" rx="2" ry="1" fill="#fe5ba0"/> <ellipse cx="32" cy="18" rx="2" ry="1" fill="#fe5ba0" /> <defs> <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#000;stop-opacity:1" /> <stop offset="100%" style="stop-color:#1039b9;stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="28" cy="12" rx="1.5" ry="3" fill="url(#grad3)" /> <ellipse cx="22" cy="12" rx="1.5" ry="3" fill="url(#grad3)" /> <ellipse cx="28" cy="11" rx=".8" ry="1" fill="#f8fff3" /> <ellipse cx="22" cy="11" rx=".8" ry="1" fill="#f8fff3" /> <defs> <linearGradient id="grad4" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#e9729a;stop-opacity:1" /> <stop offset="100%" style="stop-color:#dd1857;stop-opacity:1" /> </linearGradient> </defs> <circle cx="25" cy="22" r="2" fill="url(#grad4)"> <animate attributeName="r" values="1;1;2;1;1" dur="2.5s" repeatCount="indefinite" /></circle> <ellipse cx="25" cy="2" rx="8" ry="5" style="fill:yellow" /> <ellipse cx="25" cy="1" rx="6" ry="5" style="fill:hsl(170, 95%, 93%)" /> <rect width="1" height="15" fill="#422020" x="8" y="6.5" transform="rotate(-4)"></rect> <circle cx="8.8" cy="4" r="2" fill="#FFBF00"/> <text x="2" y="45" fill="black" style="font-size:4;font-weight:bold;">ชุติมา ณะแก้ว 63070039</text> </svg> -------------------------------------------------------------------------- <svg viewbox="0 0 200 200" style="fill:red;stroke:black;stroke-width:2;opacity:1" > <defs> <linearGradient id="eyes" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:black;stop-opacity:1" /> <stop offset="100%" style="stop-color:blue;stop-opacity:1" /> </linearGradient> <linearGradient id="mounth" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:hsl(351, 73%, 35%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(351, 85%, 48%);stop-opacity:1" /> </linearGradient> <linearGradient id="hammer" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:hsl(0, 51%, 33%) ;stop-opacity:1" /> <stop offset="50%" style="stop-color:hsl(0, 60%, 23%) ;stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(0, 51%, 13%) ;stop-opacity:1" /> </linearGradient> <linearGradient id="foot" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:hsl(0, 100%, 59%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(0, 100%, 25%);stop-opacity:1" /> </linearGradient> <radialGradient id="body" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:hsl(351, 100%, 86%); stop-opacity:1" /> <stop offset="50%" style="stop-color:hsl(350, 100%, 91%); stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(351, 100%, 86%);stop-opacity:1" /> </radialGradient> <radialGradient id="cloth" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:white; stop-opacity:1" /> <stop offset="50%" style="stop-color:hsl(0, 0%, 80%); stop-opacity:1" /> <stop offset="100%" style="stop-color:white;stop-opacity:1" /> </radialGradient> </defs> <rect x="24" y="37" rx="2" ry="5" width="170" height="8" fill="url(#hammer)" transform-origin= "100 65" transform="rotate(130)" /> <rect x="90" y="20" rx="10" width="120" height="71" fill="url(#hammer)" transform="rotate(39.5)" transform-origin= "145 40" /> <rect x="73" y="23" width="76" height="8" style="fill:white;stroke:black;opacity:1" transform-origin= "110 29" transform="rotate(129)"/> <rect x="114" y="108.5" width="76" height="8" style="fill:white;stroke:black;opacity:1" transform-origin= "125 79" transform="rotate(-51)"/> <rect x="80" y="55" rx="2" ry="5" width="20" height="8" style="fill:hsl(186, 74%, 75%);stroke:black;opacity:1"transform-origin= "90 59" transform="rotate(50)" /> <rect x="100" y="55" rx="2" ry="5" width="20" height="8" style="fill:white;stroke:black;opacity:1"transform-origin= "110 59" transform="rotate(-40)"/> <ellipse cx="80" cy="140" rx="23" ry="10" fill="url(#foot)" /> <ellipse cx="75" cy="100" rx="30" ry="15" fill="url(#body)" transform-origin= "90 90" transform="rotate(40)"/> <ellipse cx="133" cy="100" rx="30" ry="15" fill="url(#body)" transform-origin= "110 100" transform="rotate(-30)"/> <circle cx="100" cy="100" r="40" fill="url(#body)" /> <ellipse cx="90" cy="85" rx="6" ry="11" fill="black" /> <ellipse cx="110" cy="85" rx="6" ry="11" fill="black" /> <ellipse cx="90" cy="80" rx="4" ry="5" fill="white" /> <ellipse cx="110" cy="80" rx="4" ry="5" fill="white" /> <path d="M84.2,85 a1,2 0 0,0 11.5,0" fill="url(#eyes)" /> <path d="M104.2,85 a1,2 0 0,0 11.5,0" fill="url(#eyes)" /> <path d="M93,110 a3,4 0 0,0 15,0" fill="url(#mounth)" /> <ellipse cx="65" cy="100" rx="11" ry="3" fill="url(#mounth)" /> <ellipse cx="137" cy="100" rx="11" ry="3" fill="url(#mounth)" /> <rect x="70" y="65" rx="2" ry="5" width="60" height="8" style="fill:hsl(186, 74%, 75%);stroke:blackopacity:1" /> <rect x="75" y="65" rx="2" ry="5" width="50" height="8" style="fill:white;stroke:black;opacity:1" /> <rect x="80" y="65" rx="2" ry="5" width="40" height="8" style="fill:hsl(186, 74%, 75%);stroke:black;opacity:1" /> <rect x="85" y="65" rx="2" ry="5" width="30" height="8" style="fill:white;stroke:black;opacity:1" /> <rect x="90" y="65" rx="2" ry="5" width="20" height="8" style="fill:hsl(186, 74%, 75%);stroke:black;opacity:1" /> <ellipse cx="125" cy="120" rx="14" ry="23" fill="url(#foot)" transform-origin= "120 130" transform="rotate(40)"/> <text x="10" y="190" fill="black" style="font-size:15;font-weight:normal;">ปรัชญา ดอกบัว 63070100</text> </svg> -------------------------------------------------------------------------- <svg viewBox="0 0 40 40"> <ellipse cx="20" cy="40" rx="4" ry="5" fill="hsl(53, 85%, 51%)" transform="rotate(-13)" /> <ellipse cx="20" cy="30" rx="4" ry="5" fill="hsl(53, 85%, 51%)" transform="rotate(13)" /> <ellipse cx="20" cy="21" rx="15" ry="14" fill="hsl(27, 100%, 46%)" /> //ขอบ <circle cx="20" cy="21" r="15" fill="hsl(27, 100%, 46%)"></circle> <ellipse cx="36" cy="22" rx="4" ry="3" fill="hsl(27, 100%, 46%)" transform="rotate(40)" transform-origin="30" /> <ellipse cx="20" cy="22" rx="14.4" ry="11" fill="hsl(27, 75%, 74%)" /> //หน้า <ellipse cx="20" cy="21" rx="14" ry="13" fill="hsl(27, 75%, 74%)" /> //หน้า <ellipse cx="20" cy="22" rx="14.5" ry="13" fill="hsl(27, 75%, 74%)" /> //หน้า <ellipse cx="16" cy="18.5" rx="2" ry="4" fill="hsl(27, 75%, 29%)" /> //ตา <ellipse cx="24" cy="18.5" rx="2" ry="4" fill="hsl(27, 75%, 29%)" /> <ellipse cx="12" cy="23" rx="2.4" ry="1.1" fill="hsl(27, 75%, 60%)" /> //เเก้ม <ellipse cx="28" cy="23" rx="2.4" ry="1.1" fill="hsl(27, 75%, 60%)" /> //เเก้ม <rect x="3" y="15" width="2" height="200" fill="hsl(28, 40%, 19%)" transform="rotate(-1.5)"/> <rect x="3" y="15.9" width="2" height="4" fill="hsl(2, 95%, 48%)" transform="rotate(-1.5)"/> <polygon points="4,4 7,12 4.5,17 2,12" style="fill:gray;stroke:black;stroke-width:0.54" /> <line x1="3.9" y1="5" x2="4.15" y2="16.4" style="stroke:hsl(7, 0%, 26%);stroke-width:0.2" transform="rotate(-1.3)"/> <line x1="6.5" y1="12" x2="2.1" y2="12" style="stroke:hsl(7, 0%, 26%);stroke-width:0.2" transform="rotate(-1)"/> <ellipse cx="3" cy="22" rx="2.5" ry="3" fill="hsl(27, 100%, 46%)" /> <text x="2" y="39" fill="black" style="font-size:3;font-weight:bold;">ชินทัศน์ พรหมมี 63070036</text> </svg> -------------------------------------------------------------------------- <svg viewbox="-1 2 102 100"> <defs> <linearGradient id="leggrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(166,38,38);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs><defs> <linearGradient id="eye" x1="0%" y1="100%" x2="0%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0, 17, 255);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse id="leg"cx="80" cy="75" rx="15" ry="20" fill="url(#leggrad)" transform="rotate(-10)" transform-origin="50 50" stroke="brown"></ellipse> <ellipse id="leg"cx="30" cy="80" rx="15" ry="20" fill="url(#leggrad)" stroke="brown"></ellipse> <path id="arm" d="M 20 25 C -5 25, -5 50, 11 56" stroke="brown"; fill="pink"; stroke-width= "1.5";/> <circle cx="50" cy="50" r="40" fill="pink" stroke="brown"> </circle> <ellipse cx="32" cy="40" rx="3" ry="7" fill="url(#eye)"></ellipse> <ellipse cx="43" cy="40" rx="3" ry="7" fill="url(#eye)"></ellipse> <ellipse cx="32" cy="36.5" rx="2" ry="3" fill="white"></ellipse> <ellipse cx="43" cy="36.5" rx="2" ry="3" fill="white"></ellipse> <path d="M 32 50 C 33 55, 42 55, 43 50" stroke="brown"; fill="pink"; stroke-width= "1.5";/> <path id="arm" d="M 70 20 C 110 10, 95 50, 85 50 " stroke="brown"; fill="pink"; stroke-width= "1.5";/> <text x="5" y="100" fill="black" style="font-size:6;font-weight:bold;">ยุทธศิลป์ บุตรโยจันโท 63070144</text> </svg> -------------------------------------------------------------------------- <svg viewBox="0 0 100 100"> <ellipse cx="50" cy="40" rx="30" ry="30" fill="pink"/> <ellipse cx="20" cy="40" rx="10" ry="5" fill="pink"/> <ellipse cx="80" cy="40" rx="10" ry="5" fill="pink"/> <rect fill="red" width="60" height="10" x="20" y="60"> </rect> <ellipse cx="40" cy="30" rx="6" ry="9" fill="black"/> <ellipse cx="60" cy="30" rx="6" ry="9" fill="black"/> <ellipse cx="40" cy="25" rx="3" ry="3" fill="white"/> <ellipse cx="60" cy="25" rx="3" ry="3" fill="white"/> <ellipse cx="50" cy="50" rx="3" ry="3" fill="black"/> <text x="5" y="89" fill="black" style="font-size:7;font-weight;bold;">ศิริชัย ทวีวัฒนะกิจบวร 63070166</text> </svg> -------------------------------------------------------------------------- <svg viewBox="0 0 100 100"> <rect fill="black" width="45" height="7" x="27" y="15"> </rect> <rect fill="black" width="35" height="30" x="32" y="5"> </rect> <ellipse cx="50" cy="50" rx="30" ry="30" fill="pink"/> <ellipse cx="30" cy="50" rx="8" ry="5" fill="hsl(344, 95%, 50%)"/> <ellipse cx="70" cy="50" rx="8" ry="5" fill="hsl(344, 95%, 50%)"/> <ellipse cx="25" cy="62" rx="7" ry="7" fill="pink"/> <ellipse cx="75" cy="62" rx="7" ry="7" fill="pink"/> <ellipse cx="40" cy="35" rx="5" ry="9" fill="black"/> <ellipse cx="60" cy="35" rx="5" ry="9" fill="black"/> <ellipse cx="40" cy="32" rx="3" ry="5" fill="white"/> <ellipse cx="60" cy="32" rx="3" ry="5" fill="white"/> <ellipse cx="50" cy="60" rx="7" ry="5" fill="black"/> <ellipse cx="30" cy="80" rx="15" ry="8" fill="hsl(337, 95%, 50%)"/> <ellipse cx="70" cy="80" rx="15" ry="8" fill="hsl(337, 95%, 50%)"/> <text x="5" y="89" fill="black" style="font-size:7;font-weight;bold;">ปาวีณา ตันติสิริสมบูรณ์ 63070108</text> </svg> -------------------------------------------------------------------------- <svg viewBox="0 0 40 40"> <svg x="0"> <ellipse cx="10" cy="10" rx="4" ry="6" fill="hsl(350,90%,66%)" /> <ellipse cx="30" cy="10" rx="4" ry="6" fill="hsl(350,90%,66%)" /> </svg> <svg x="0"> <ellipse cx="20" cy="20" rx="15" ry="15" fill="hsl(345,80%,70%)" /> </svg> <svg> <ellipse cx="15" cy="17" rx="2" ry="4" fill="hsl(30,70%,10%)" /> <circle cx="14.3" cy="15" fill="white" r="1"></circle> </svg> <svg x="10"> <ellipse cx="15" cy="17" rx="2" ry="4" fill="hsl(30,70%,10%)" /> <circle cx="14.3" cy="15" fill="white" r="1"></circle> </svg> <svg x="0"> <ellipse cx="30" cy="22" rx="2" ry="1" fill="hsl(345,80%,80%)" /> <ellipse cx="10" cy="22" rx="2" ry="1" fill="hsl(345,80%,80%)" /> </svg> <svg y="0"> <ellipse cx="20" cy="24" rx="4" ry="2" fill="hsl(10,70%,40%)" /> <ellipse cx="20" cy="25" fill="hsl(2,80%,70%)" rx="2" ry="1"> </ellipse> </svg> <svg y="20"> <ellipse cx="10" cy="10" rx="4" ry="6" fill="hsl(0,80%,30%)" /> <ellipse cx="30" cy="10" rx="4" ry="6" fill="hsl(0,80%,30%)" /> </svg> <text x="2" y="39" fill="black" style="font-size:3;font-weight:bold;">ชาคริต ดิสกุล 63070035</text> </svg> </body> </html> <!--<ellipse cx="90" cy="90" rx="1" ry="1" fill="black" /> เอาไว้หาจุดที่ต้องการ-->