OWL – SVG (Copy 5733)
✨ KALYARAK CHOOBPHA
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background: url(https://64.media.tumblr.com/736a188c289adc6dbd24e5bf6406c891/82081e13235f97b9-8b/s540x810/9e42ab1e1ff368550960025f5d6a6e8eb32d5a44.gifv); background-size: 100% 100%; } </style> </head> <body> <svg viewBox="0 0 40 40"> <!-- ลายหัว --> <defs> <pattern id="feather" width="40" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(1)"> <circle cx="12.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="14" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="16.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="18.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="20.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="22.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="24.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="26.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="12.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="14" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="16.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="18.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="20.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="22.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="24.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="26.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="12.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="14" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="16.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="18.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="20.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="22.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="24.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="26.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="12.5" cy="13" r="2" stroke="none" fill="#c59b71"/> <circle cx="14" cy="13" r="2" stroke="none" fill="#c59b71"/> <circle cx="16.5" cy="13" r="2" stroke="none" fill="#c59b71"/> <circle cx="18.5" cy="13" r="2" stroke="none" fill="#c59b71"/> <circle cx="20.5" cy="13" r="2" stroke="none" fill="#c59b71"/> <circle cx="22.5" cy="13" r="2" stroke="none" fill="#c59b71"/> <circle cx="24.5" cy="13" r="2" stroke="none" fill="#c59b71"/> <circle cx="26.5" cy="13" r="2" stroke="none" fill="#c59b71"/> <circle cx="12.5" cy="11" r="2" stroke="none" fill="#ab6b35"/> <circle cx="14" cy="11" r="2" stroke="none" fill="#ab6b35"/> <circle cx="16.5" cy="11" r="2" stroke="none" fill="#ab6b35"/> <circle cx="18.5" cy="11" r="2" stroke="none" fill="#ab6b35"/> <circle cx="20.5" cy="11" r="2" stroke="none" fill="#ab6b35"/> <circle cx="22.5" cy="11" r="2" stroke="none" fill="#ab6b35"/> <circle cx="24.5" cy="11" r="2" stroke="none" fill="#ab6b35"/> <circle cx="26.5" cy="11" r="2" stroke="none" fill="#ab6b35"/> <circle cx="13" cy="9" r="2" stroke="none" fill="#793e1d"/> <circle cx="14" cy="9" r="2" stroke="none" fill="#793e1d"/> <circle cx="16.5" cy="9" r="2" stroke="none" fill="#793e1d"/> <circle cx="18.5" cy="9" r="2" stroke="none" fill="#793e1d"/> <circle cx="20.5" cy="9" r="2" stroke="none" fill="#793e1d"/> <circle cx="22.5" cy="9" r="2" stroke="none" fill="#793e1d"/> <circle cx="24.5" cy="9" r="2" stroke="none" fill="#793e1d"/> <circle cx="26.5" cy="9" r="2" stroke="none" fill="#793e1d"/> <circle cx="14.5" cy="7" r="2" stroke="none" fill="#6e260e"/> <circle cx="16.5" cy="7" r="2" stroke="none" fill="#6e260e"/> <circle cx="18.5" cy="7" r="2" stroke="none" fill="#6e260e"/> <circle cx="20.5" cy="7" r="2" stroke="none" fill="#6e260e"/> <circle cx="22.5" cy="7" r="2" stroke="none" fill="#6e260e"/> <circle cx="24.5" cy="7" r="2" stroke="none" fill="#6e260e"/> <circle cx="26.5" cy="7" r="2" stroke="none" fill="#6e260e"/> <circle cx="14.5" cy="5" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="16.5" cy="5" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="18.5" cy="5" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="20.5" cy="5" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="22.5" cy="5" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="24.5" cy="5" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="26.5" cy="5" r="2" stroke="none" fill="#3b1b0c"/> </pattern> </defs> <!-- ลายตัว --> <defs> <pattern id="feather1" width="60" height="30" patternUnits="userSpaceOnUse" patternTransform="scale(1)"> <circle cx="14.5" cy="29" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="16.5" cy="29" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="18.5" cy="29" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="20.5" cy="29" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="22.5" cy="29" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="24.5" cy="29" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="26.5" cy="29" r="2" stroke="none" fill="#3b1b0c"/> <circle cx="14.5" cy="27" r="2" stroke="none" fill="#6e260e"/> <circle cx="16.5" cy="27" r="2" stroke="none" fill="#6e260e"/> <circle cx="18.5" cy="27" r="2" stroke="none" fill="#6e260e"/> <circle cx="20.5" cy="27" r="2" stroke="none" fill="#6e260e"/> <circle cx="22.5" cy="27" r="2" stroke="none" fill="#6e260e"/> <circle cx="24.5" cy="27" r="2" stroke="none" fill="#6e260e"/> <circle cx="26.5" cy="27" r="2" stroke="none" fill="#6e260e"/> <circle cx="13" cy="25" r="2" stroke="none" fill="#793e1d"/> <circle cx="14" cy="25" r="2" stroke="none" fill="#793e1d"/> <circle cx="16.5" cy="25" r="2" stroke="none" fill="#793e1d"/> <circle cx="18.5" cy="25" r="2" stroke="none" fill="#793e1d"/> <circle cx="20.5" cy="25" r="2" stroke="none" fill="#793e1d"/> <circle cx="22.5" cy="25" r="2" stroke="none" fill="#793e1d"/> <circle cx="24.5" cy="25" r="2" stroke="none" fill="#793e1d"/> <circle cx="26.5" cy="25" r="2" stroke="none" fill="#793e1d"/> <circle cx="12.5" cy="23" r="2" stroke="none" fill="#ab6b35"/> <circle cx="14" cy="23" r="2" stroke="none" fill="#ab6b35"/> <circle cx="16.5" cy="23" r="2" stroke="none" fill="#ab6b35"/> <circle cx="18.5" cy="23" r="2" stroke="none" fill="#ab6b35"/> <circle cx="20.5" cy="23" r="2" stroke="none" fill="#ab6b35"/> <circle cx="22.5" cy="23" r="2" stroke="none" fill="#ab6b35"/> <circle cx="24.5" cy="23" r="2" stroke="none" fill="#ab6b35"/> <circle cx="26.5" cy="23" r="2" stroke="none" fill="#ab6b35"/> <circle cx="12.5" cy="21" r="2" stroke="none" fill="#c59b71"/> <circle cx="14" cy="21" r="2" stroke="none" fill="#c59b71"/> <circle cx="16.5" cy="21" r="2" stroke="none" fill="#c59b71"/> <circle cx="18.5" cy="21" r="2" stroke="none" fill="#c59b71"/> <circle cx="20.5" cy="21" r="2" stroke="none" fill="#c59b71"/> <circle cx="22.5" cy="21" r="2" stroke="none" fill="#c59b71"/> <circle cx="24.5" cy="21" r="2" stroke="none" fill="#c59b71"/> <circle cx="26.5" cy="21" r="2" stroke="none" fill="#c59b71"/> <circle cx="12.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="14" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="16.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="18.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="20.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="22.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="24.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="26.5" cy="19" r="2" stroke="none" fill="#FFE8D0"/> <circle cx="12.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="14" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="16.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="18.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="20.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="22.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="24.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="26.5" cy="17" r="2" stroke="none" fill="#FFD5AB"/> <circle cx="12.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="14" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="16.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="18.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="20.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="22.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="24.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> <circle cx="26.5" cy="15" r="2" stroke="none" fill="#EBBD8F"/> </pattern> </defs> <!-- ปีก --> <ellipse cx=27 cy=22 rx=3 ry=7 fill=#3b1b0c></ellipse> <ellipse cx=13 cy=22 rx=3 ry=7 fill=#3b1b0c></ellipse> <!-- ตัว --> <ellipse cx=20 cy=20 rx=8 ry=10 fill=url(#feather1)></ellipse> <circle cx=20 cy=12 r=8 fill=url(#feather)></circle> <!-- ขาซ้าย --> <ellipse cx=18 cy=30 rx=1 ry=2 fill=#784F23></ellipse> <ellipse cx=16 cy=30 rx=1 ry=2 fill=#784F23></ellipse> <!-- ขาขวา --> <ellipse cx=22 cy=30 rx=1 ry=2 fill=#784F23></ellipse> <ellipse cx=24 cy=30 rx=1 ry=2 fill=#784F23></ellipse> <!-- ตา --> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255, 165, 54);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255, 209, 54);stop-opacity:1" /> </linearGradient> <circle cx=16 cy=10 r=3.5 fill=#e6c29f></circle> <circle cx=24 cy=10 r=3.5 fill=#e6c29f></circle> <circle cx=16 cy=10 r=3 fill=white></circle> <circle cx=24 cy=10 r=3 fill=white></circle> <circle cx=16 cy=10 r=2.5 fill="url(#grad1)"></circle> <circle cx=24 cy=10 r=2.5 fill="url(#grad1)"></circle> <circle cx=16 cy=10 r=2 fill=black></circle> <circle cx=24 cy=10 r=2 fill=black></circle> <polygon points="14,8 16,9 15,10" style="fill:white;" /> <polygon points="22,8 24,9 23,10" style="fill:white;" /> <!-- ปาก --> <polygon points="20,12 21,13 20,15 19,13" style="fill:#f68b2c;" /> <!-- หูน้อน --> <polygon points="25,6 23,5 25,3.5" style="fill:#3b1b0c;" /> <polygon points="17,5 15,6 15,3.5" style="fill:#3b1b0c;" /> <!-- ขอนไม้ --> <linearGradient id="grad2"x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255, 165, 54);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(76, 46, 18);stop-opacity:1" /> </linearGradient> <line x1="0" y1="30" x2="200" y2="30"style="stroke:url(#grad2);stroke-width:3"/> </svg> </body> </html>