SVG Path Pattern (Branch 6506) (Copy 7662)
✨ pornpawee
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:blueviolet; box-shadow:0 0 20px #0001; width:80%; } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- สร้าง pattern --> <defs> <pattern id="wave" viewBox="0,0,10,10" width="100%" height="100%"> <circle r="8" cx="5" cy="5" fill="orange"/> <circle r="8" cx="10" cy="0" fill="orange"/> <circle r="39" cx="0" cy="10" fill="orange"/> <circle r="90" cx="10" cy="10" fill="orange"/> <circle r="76" cx="0" cy="0" fill="orange"/> </pattern> <pattern id="sea" viewBox="0,4,12,7" width="10%" height="10%"> <rect width="10" height="10" fill="#FFEE58"> </rect> <path fill="#000" stroke="#D500F9" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" > <animate attributeName="d" values=" m0 9 45 47 50 -90 78 -9; m-9 8 9 34 45 -22 " dur="2.4s" repeatCount="indefinite" /> </path> </pattern> <pattern id="sea1" viewBox="0,0,8,8" width="10%" height="10%"> <rect width="8" height="8" fill="yellow"> </rect> <circle r="7" cx="2" cy="2" fill="#DD2C00"/> <circle r="4" cx="6" cy="6" fill="#64DD17"/> <circle r=".9" cx="6" cy="6" fill="#000"/> <circle r="2" cx="3" cy="5" fill="#004D40"/> </pattern> </defs> <pattern id="eye" viewBox="0,0,9,9" width="10%" height="10%"> <circle r="8" cx="5" cy="0" fill="#3E2723"/> <circle r="4" cx="6" cy="5" fill="#000"/> </pattern> <!-- ใช้ pattern --> <rect width="100" height="100" fill="url(#sea)"/> <circle r="15" cx="20" cy="20" fill="url(#sea1)"/> <circle r="5" cx="24" cy="38" fill="url(#sea1)"/> <circle r="7" cx="24" cy="10" fill="white"/> <circle r="3" cx="24" cy="10" fill="url(#eye)"/> <circle r="5" cx="30" cy="35" fill="url(#sea1)"/> <circle r="15" cx="70" cy="46" fill="url(#sea1)"/> <circle r="7" cx="65" cy="43" fill="white"/> <circle r="3" cx="65" cy="43" fill="url(#eye)"/> <circle r="5" cx="89" cy="45" fill="url(#sea1)"/> <circle r="5" cx="89" cy="50" fill="url(#sea1)"/> <circle r="15" cx="40" cy="80" fill="url(#sea1)"/> <circle r="7" cx="47" cy="72" fill="white"/> <circle r="3" cx="47" cy="72" fill="url(#eye)"/> <circle r="5" cx="22" cy="74" fill="url(#sea1)"/> <circle r="5" cx="21" cy="80" fill="url(#sea1)"/> </svg> </body> </html>