SVG HW GroupC P’ SSPIM (Copy 7762)
✨ Chinnatad Prommee
<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)"> ><animate attributeName="cy" values="20;19;20" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </circle> <circle cx="34" cy="20" r="4" fill="url(#pink)"><animate attributeName="cy" values="20;19;20" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </circle> <circle cx="20" cy="20" r="15.1" fill="url(#pink1)"><animate attributeName="cy" values="20;19;20" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </circle> <circle cx="20.1" cy="20.1" r="15" fill="url(#pink)"><animate attributeName="cy" values="20;19;20" dur="2s" begin="3s" repeatCount="indefinite" /> </circle> <!--eyes--> <ellipse cx="26.8" cy="15.2" rx="1.5" ry="3" fill="url(#pink1)"> <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="19.8" cy="15.2" rx="1.5" ry="3" fill="url(#pink1)"> <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="27.2" cy="14.9" rx="1.5" ry="3" fill="url(#pink2)"> <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="20.2" cy="14.9" rx="1.5" ry="3" fill="url(#pink2)"> <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="27" cy="15" rx="1.5" ry="3" fill="hsl(250, 10%, 20%)"> <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="20" cy="15" rx="1.5" ry="3" fill="hsl(250, 10%, 20%)"> <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <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)"><animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="20" cy="15" rx="1.2" ry="2.7" fill="url(#eye)"> <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="27" cy="13.5" rx="0.9" ry="1.3" fill="hsl(250, 10%, 100%)"> <animate attributeName="opacity" values="1;0;1" dur="2s" begin="0.9s" repeatCount="indefinite" /> </ellipse> <ellipse cx="20" cy="13.5" rx="0.9" ry="1.3" fill="hsl(250, 10%, 100%)"> <animate attributeName="opacity" values="1;0;1" dur="2s" begin="0.9s" repeatCount="indefinite" /> </ellipse> <!--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)"><animate attributeName="ry" values="1.3;0;1.3" dur="2s" begin="2s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="24" cy="21" rx="0.9" ry="1.3" fill="url(#mouth)"><animate attributeName="ry" values="1.3;0;1.3" dur="2s" begin="2s;f3.end" repeatCount="indefinite" /> </ellipse> <!--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)"><animate attributeName="fill" values="hsl(339, 70%, 70%);hsl(339, 70%, 55%);hsl(339, 70%, 70%)" dur="2s" repeatCount="indefinite" /> </ellipse> <ellipse cx="31.7" cy="19" rx="3" ry="1.3" fill="hsl(339, 70%, 70%)" filter="url(#f1)"><animate attributeName="fill" values="hsl(339, 70%, 70%);hsl(339, 70%, 55%);hsl(339, 70%, 70%)" dur="2s" repeatCount="indefinite" /> </ellipse> <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)"> <animate attributeName="cy" values="22;21;22" dur="1s" repeatCount="indefinite"/> <animate attributeName="cx" values="18;17;18" dur="1s" repeatCount="indefinite"/> </ellipse> <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)" > <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="22" cy="12" rx="1.5" ry="3" fill="url(#grad3)" > <animate attributeName="ry" values="3;0;3" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="28" cy="11" rx=".8" ry="1" fill="#f8fff3" > <animate attributeName="opacity" values="1;0;1" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <ellipse cx="22" cy="11" rx=".8" ry="1" fill="#f8fff3" ><animate attributeName="opacity" values="1;0;1" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <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" fill="yellow" ><animate attributeName="rx" values="8;9;8" dur="2s" repeatCount="indefinite" /></ellipse> <ellipse cx="25" cy="1" rx="6" ry="5" style="fill:hsl(170, 95%, 93%)" > <animate attributeName="rx" values="6;7;6" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="5;4;5" dur="2s" repeatCount="indefinite" /></ellipse> <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"> <animate attributeName="fill" values="#FFBF00;#ffff87;#FFBF00" dur="3s" repeatCount="indefinite" /> </circle> <circle cx="5" cy="3" r="1" fill="yellow"> <animate attributeName="opacity" values="1;0.2;1" dur="3s" repeatCount="indefinite" /> </circle> <circle cx="12" cy="3" r="0.5" fill="yellow"> <animate attributeName="opacity" values="1;0.2;1" dur="3s" begin="2s" repeatCount="indefinite" /> </circle> <circle cx="10" cy="6" r="0.5" fill="yellow"> <animate attributeName="opacity" values="1;0.2;1" dur="3s" begin="1s" repeatCount="indefinite" /> </circle> <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)" > <animate attributeName="x" values="24;22;24" dur="2s" begin="2s" repeatCount="indefinite" ></animate> </rect> <rect x="90" y="20" rx="10" width="120" height="71" fill="url(#hammer)" transform="rotate(39.5)" transform-origin= "145 40" > <animate attributeName="x" values="90;80;91;90" dur="2s" begin="2s" repeatCount="indefinite" ></animate></rect> <rect x="73" y="23" width="76" height="8" style="fill:white;stroke:black;opacity:1" transform-origin= "110 29" transform="rotate(129)"> <animate attributeName="y" values="23;24;23" dur="2s" begin="2s" repeatCount="indefinite" ></animate></rect> <rect x="114" y="108.5" width="76" height="8" style="fill:white;stroke:black;opacity:1" transform-origin= "125 79" transform="rotate(-51)"> <animate attributeName="y" values="108.5;106.5;108.5" dur="2s" begin="2s" repeatCount="indefinite" ></animate></rect> <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)" > <animate attributeName="y" values="55;60;55" dur="2s" begin="1s" repeatCount="indefinite" /></rect> <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="1" fill="black" ><animate attributeName="ry" values="11;0;11" dur="2s" begin="1s" repeatCount="indefinite" /> </ellipse> <ellipse cx="110" cy="85" rx="6" ry="11" fill="black" > <animate attributeName="ry" values="11;0;11" dur="2s" begin="1s" repeatCount="indefinite" /> </ellipse> <ellipse cx="90" cy="80" rx="4" ry="5" fill="white" > <animate attributeName="opacity" values="1;0;1" dur="2s" begin="1s" repeatCount="indefinite" /> </ellipse> <ellipse cx="110" cy="80" rx="4" ry="5" fill="white" > <animate attributeName="opacity" values="1;0;1" dur="2s" begin="1s" repeatCount="indefinite" /> </ellipse> <path d="M84.2,85 a1,2 0 0,0 11.5,0" fill="url(#eyes)" ><animate attributeName="ry" values="11;0;11" dur="2s" begin="1s" repeatCount="indefinite" /> </path> <path d="M104.2,85 a1,2 0 0,0 11.5,0" fill="url(#eyes)" > <animate attributeName="ry" values="11;0;11" dur="2s" begin="1s" repeatCount="indefinite" /> </path> <path d="M93,110 a3,4 0 0,0 15,0" fill="url(#mounth)" > <animate attributeName="d" values="M93,110 a3,4 0 0,0 15,0;M93,110 a3,4 0 0,0 12,0;M93,110 a3,4 0 0,0 15,0" dur="3s" begin="1s" repeatCount="indefinite" /></path> <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" > <animate attributeName="y" values="65;70;65" dur="2s" begin="1s" repeatCount="indefinite" /></rect> <rect x="75" y="65" rx="2" ry="5" width="50" height="8" style="fill:white;stroke:black;opacity:1" > <animate attributeName="y" values="65;70;65" dur="2s" begin="1s" repeatCount="indefinite" /></rect> <rect x="80" y="65" rx="2" ry="5" width="40" height="8" style="fill:hsl(186, 74%, 75%);stroke:black;opacity:1" ><animate attributeName="y" values="65;70;65" dur="2s" begin="1s" repeatCount="indefinite" /></rect> <rect x="85" y="65" rx="2" ry="5" width="30" height="8" style="fill:white;stroke:black;opacity:1" ><animate attributeName="y" values="65;70;65" dur="2s" begin="1s" repeatCount="indefinite" /></rect> <rect x="90" y="65" rx="2" ry="5" width="20" height="8" style="fill:hsl(186, 74%, 75%);stroke:black;opacity:1" ><animate attributeName="y" values="65;70;65" dur="2s" begin="1s" repeatCount="indefinite" /></rect> <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" ><animate attributeName="cy" values="22;21;22" dur="2s" begin="1s" repeatCount="indefinite"/> </ellipse> //หน้า <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%)" > <animate attributeName="ry" values="4;0;4" dur="2s" begin="1s;f3.end" repeatCount="indefinite" /> </ellipse> <circle cx="16.7" cy="17.5" r="0.8" fill="hsl(0,0%,100%)"><animate attributeName="opacity" values="1;0;1" dur="2s" begin="0.9s" repeatCount="indefinite" /></circle>//ตา <ellipse cx="24" cy="18.5" rx="2" ry="4" fill="hsl(27, 75%, 29%)" > <animate attributeName="ry" values="4;0;4" dur="2s" begin="1s" repeatCount="indefinite" /> </ellipse> <circle cx="24.7" cy="17.5" r="0.8" fill="hsl(0,0%,100%)"><animate attributeName="opacity" values="1;0;1" dur="2s" begin="0.9s" repeatCount="indefinite" /></circle> <ellipse cx="12" cy="23" rx="2.4" ry="1.1" fill="hsl(27, 75%, 60%)" > //เเก้ม <animate attributeName="fill" values="hsl(27,75%,60%);hsl(0,75%,60%);hsl(27,75%,60%)" dur="5s" begin="2s" repeatCount="indefinite"/></ellipse> <ellipse cx="28" cy="23" rx="2.4" ry="1.1" fill="hsl(27, 75%, 60%)" > <animate attributeName="fill" values="hsl(27,75%,60%);hsl(0,75%,60%);hsl(27,75%,60%)" dur="5s" begin="2s" repeatCount="indefinite"/></ellipse>//เเก้ม <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%)"> <animate attributeName="cy" values="22;21;22" dur="2s" begin="1s" repeatCount="indefinite"/></ellipse> <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"> <animate attributeName="cy" values="75;76;75" dur="2s" begin="1s" repeatCount="indefinite"/></ellipse> <ellipse id="leg"cx="30" cy="80" rx="15" ry="20" fill="url(#leggrad)" stroke="brown"><animate attributeName="cy" values="80;81;80" dur="2s" begin="1s" repeatCount="indefinite"/></ellipse> <path id="arm" d="M 20 25 C -5 25, -5 50, 11 56" stroke="brown"; fill="pink"; stroke-width= "1.5";> <animate attributeName="d" values="M 20 25 C -5 25, -5 50, 11 56;M 20 28 C -5 25, -5 50, 11 56;M 20 29 C -5 25, -5 50, 11 56;M 20 26 C -5 25, -5 50, 11 56" dur="3s" begin="1s" repeatCount="indefinite"/> </path> <circle cx="50" cy="50" r="40" fill="pink" stroke="brown"><animate attributeName="cy" values="50;55;50" dur="3s" begin="1s" repeatCount="indefinite"/> </circle> <ellipse cx="32" cy="40" rx="3" ry="7" fill="url(#eye)"><animate attributeName="cy" values="40;45;40" dur="3s" begin="1s" repeatCount="indefinite"/></ellipse> <ellipse cx="43" cy="40" rx="3" ry="7" fill="url(#eye)"><animate attributeName="cy" values="40;45;40" dur="3s" begin="1s" repeatCount="indefinite"/></ellipse> <ellipse cx="32" cy="36.5" rx="2" ry="3" fill="white"><animate attributeName="cy" values="37;42;37" dur="3s" begin="1s" repeatCount="indefinite"/></ellipse> <ellipse cx="43" cy="36.5" rx="2" ry="3" fill="white"><animate attributeName="cy" values="37;42;37" dur="3s" begin="1s" repeatCount="indefinite"/></ellipse> <path d="M 32 50 C 33 55, 42 55, 43 50" stroke="brown"; fill="pink"; stroke-width= "1.5";><animate attributeName="d" values="M 32 50 C 33 55, 42 55, 43 50;M 32 55 C 33 55, 42 55, 43 55;M 32 50 C 33 55, 42 55, 43 50" dur="3s" begin="1s" repeatCount="indefinite"/></path> <path id="arm" d="M 70 20 C 110 10, 95 50, 85 50 " stroke="brown"; fill="pink"; stroke-width= "1.5";> <animate attributeName="d" values="M 70 20 C 110 10, 95 50, 85 50;M 70 30 C 110 15, 95 50, 85 50;M 70 25 C 110 10, 95 50, 85 50;M 70 20 C 110 10, 95 50, 85 50" dur="3s" begin="1s" repeatCount="indefinite"/> </path> <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"><animate attributeName="ry" values="5;6;5" dur="3s" begin="1s" repeatCount="indefinite" /> <animate attributeName="rx" values="10;9;10" dur="3s" begin="1s" repeatCount="indefinite" /> <animate attributeName="cy" values="40;35;40" dur="3s" begin="1s" repeatCount="indefinite" /></ellipse> <ellipse cx="80" cy="40" rx="10" ry="5" fill="pink"><animate attributeName="ry" values="5;6;5" dur="3s" begin="1s" repeatCount="indefinite" /> <animate attributeName="rx" values="10;9;10" dur="3s" begin="1s" repeatCount="indefinite" /> <animate attributeName="cy" values="40;35;40" dur="3s" begin="1s" repeatCount="indefinite" /></ellipse> <rect fill="red" width="60" height="10" x="20" y="60"><animate attributeName="height" values="10;12;10" dur="3s" begin="1s" repeatCount="indefinite" /> <animate attributeName="fill" values="red;pink;purple;blue;cyan;green;yellow;orange;red" dur="2s" repeatCount="indefinite" /> </rect> <ellipse cx="40" cy="30" rx="6" ry="9" fill="black"> <animate attributeName="ry" values="9;8;9" dur="3s" begin="1s" repeatCount="indefinite" /> </ellipse> <ellipse cx="60" cy="30" rx="6" ry="9" fill="black"><animate attributeName="ry" values="9;8;9" dur="3s" begin="1s" repeatCount="indefinite" /></ellipse> <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"> <animate attributeName="rx" values="3;5;3" dur="3s" begin="1s" repeatCount="indefinite" /> <animate attributeName="ry" values="3;5;3" dur="3s" begin="1s" repeatCount="indefinite" /> </ellipse> <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"> <animate attributeName="ry" values="30;32;30" dur="3s" begin="1s" repeatCount="indefinite"/> <animate attributeName="rx" values="30;32;30" dur="3s" begin="1s" repeatCount="indefinite"/> </ellipse> <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"><animate attributeName="ry" values="7;8;7" dur="3s" begin="1s" repeatCount="indefinite"/> <animate attributeName="rx" values="7;8;7" dur="3s" begin="1s" repeatCount="indefinite"/> </ellipse> <ellipse cx="75" cy="62" rx="7" ry="7" fill="pink"><animate attributeName="ry" values="7;8;7" dur="3s" begin="1s" repeatCount="indefinite"/> <animate attributeName="rx" values="7;8;7" dur="3s" begin="1s" repeatCount="indefinite"/> </ellipse> <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"> <animate attributeName="ry" values="7;8;6;7" dur="3s" begin="1s" repeatCount="indefinite"/> <animate attributeName="rx" values="7;8;6;7" dur="3s" begin="1s" repeatCount="indefinite"/> </ellipse> <ellipse cx="30" cy="80" rx="15" ry="8" fill="hsl(337, 95%, 50%)"> <animate attributeName="cy" values="80;75;79;80" dur="3s" begin="1s" repeatCount="indefinite"/> </ellipse> <ellipse cx="70" cy="80" rx="15" ry="8" fill="hsl(337, 95%, 50%)"> <animate attributeName="cy" values="80;78;80" dur="3s" begin="1s" repeatCount="indefinite"/> <animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="355" to="360" repeatCount="indefinite" /> <animateTransform attributeName="transform" begin="2s" dur="2s" type="rotate" from="360" to="355" repeatCount="indefinite"/></ellipse> <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%)" ><animate attributeName="cy" values="10;11;10" dur="3s" begin="1s" repeatCount="indefinite"/> </ellipse> <ellipse cx="30" cy="10" rx="4" ry="6" fill="hsl(350,90%,66%)" ><animate attributeName="cy" values="10;11;10" dur="3s" begin="1s" repeatCount="indefinite"/> </ellipse> </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%)" ><animate attributeName="fill" values="hsl(30,70%,10%);hsl(0,70%,50%);hsl(0,70%,10%);hsl(0,70%,10%)" dur="5s" begin="1s" repeatCount="indefinite"/> </ellipse> <circle cx="14.3" cy="15" fill="white" r="1"><animate attributeName="opacity" values="1;0.5;0.1;1;0;1" dur="5s" begin="1s" repeatCount="indefinite"/></circle> </svg> <svg x="10"> <ellipse cx="15" cy="17" rx="2" ry="4" fill="hsl(30,70%,10%)" ><animate attributeName="ry" values="4;3;4" dur="2s" begin="1s" repeatCount="indefinite"/> </ellipse> <circle cx="14.3" cy="15" fill="white" r="1"><animate attributeName="cy" values="15;16;15" dur="2s" begin="1s" repeatCount="indefinite"/></circle> </svg> <svg x="0"> <ellipse cx="30" cy="22" rx="2" ry="1" fill="hsl(345,80%,80%)" ><animate attributeName="fill" values="hsl(345,80%,80%);hsl(345,80%,90%);hsl(345,80%,70%);hsl(345,80%,80%)" dur="2s" begin="1s" repeatCount="indefinite"/> </ellipse> <ellipse cx="10" cy="22" rx="2" ry="1" fill="hsl(345,80%,80%)" ><animate attributeName="fill" values="hsl(345,80%,80%);hsl(345,80%,90%);hsl(345,80%,70%);hsl(345,80%,80%)" dur="2s" begin="1s" repeatCount="indefinite"/> </ellipse> </svg> <svg y="0"> <ellipse cx="20" cy="24" rx="4" ry="2" fill="hsl(10,70%,40%)" ><animate attributeName="ry" values="2;3;2" dur="5s" begin="1s" repeatCount="indefinite"/> </ellipse> <ellipse cx="20" cy="25" fill="hsl(2,80%,70%)" rx="2" ry="1"> <animate attributeName="fill" values="hsl(2,80%,70%);hsl(2,80%,90%);hsl(2,80%,70%);hsl(2,80%,80%)" dur="5s" begin="1s" repeatCount="indefinite"/> <animate attributeName="ry" values="1;2;1" dur="5s" begin="1s" repeatCount="indefinite"/> </ellipse> </svg> <svg y="20"> <ellipse cx="10" cy="10" rx="4" ry="6" fill="hsl(0,80%,30%)"><animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="-1 -2" begin="3s" dur="2s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-1 -2" to="0 0" begin="6s" dur="2s" /> </ellipse> <ellipse cx="30" cy="10" rx="4" ry="6" fill="hsl(0,80%,30%)" > <animate attributeName="cx" values="30;28;30" dur="2s" begin="1s" repeatCount="indefinite"/> </ellipse> </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" /> เอาไว้หาจุดที่ต้องการ-->