SVG Animals
Inspired by Simon Willison's pelican on a bicycle test
Prompt
Generate an SVG of a koala surfing
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html>
<head>
<title>Surfing Koala</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
<!-- Ocean background -->
<rect width="100%" height="100%" fill="#87CEEB" />
<!-- Wave -->
<path d="M0,300 Q200,250 400,300 T800,300 L800,600 L0,600 Z" fill="#1E90FF" />
<path d="M0,350 Q200,320 400,350 T800,350 L800,600 L0,600 Z" fill="#00BFFF" opacity="0.7" />
<!-- Surfboard -->
<ellipse cx="400" cy="350" rx="120" ry="30" fill="#FF6347" />
<ellipse cx="400" cy="340" rx="100" ry="20" fill="#FF4500" />
<!-- Koala Body -->
<circle cx="400" cy="300" r="50" fill="#C0C0C0" />
<!-- Koala Head -->
<circle cx="400" cy="250" r="40" fill="#C0C0C0" />
<!-- Ears -->
<circle cx="370" cy="220" r="20" fill="#C0C0C0" />
<circle cx="430" cy="220" r="20" fill="#C0C0C0" />
<circle cx="370" cy="220" r="10" fill="#808080" />
<circle cx="430" cy="220" r="10" fill="#808080" />
<!-- Eyes -->
<circle cx="385" cy="245" r="5" fill="#000" />
<circle cx="415" cy="245" r="5" fill="#000" />
<!-- Nose -->
<ellipse cx="400" cy="260" rx="5" ry="3" fill="#000" />
<!-- Arms -->
<path d="M360,310 Q340,290 360,270" stroke="#808080" stroke-width="8" fill="none" />
<path d="M440,310 Q460,290 440,270" stroke="#808080" stroke-width="8" fill="none" />
<!-- Legs -->
<ellipse cx="380" cy="340" rx="10" ry="15" fill="#C0C0C0" />
<ellipse cx="420" cy="340" rx="10" ry="15" fill="#C0C0C0" />
<!-- Sun -->
<circle cx="700" cy="100" r="50" fill="#FFD700" />
<!-- Water splashes -->
<circle cx="300" cy="380" r="15" fill="#00BFFF" opacity="0.6" />
<circle cx="500" cy="370" r="12" fill="#00BFFF" opacity="0.6" />
</svg>
</body>
</html>
```
This SVG features:
1. A vibrant ocean background with layered wave patterns
2. A bright orange surfboard with a gradient effect
3. A detailed koala with:
- Silver-gray fur
- Distinct ears with inner shading
- Expressive eyes and nose
- Positioned arms as if balancing on the board
- Legs planted firmly on the surfboard
4. Decorative elements:
- A shining sun in the corner
- Water splashes around the board
- Smooth wave curves using quadratic Bézier curves
The koala is centered on the surfboard with a playful surfing posture. The color palette uses ocean blues, vibrant oranges for the board, and natural grays for the koala.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Koala Surfing</title>
</head>
<body style="margin: 0; padding: 20px; background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 50%, #006994 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center;">
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
<!-- Ocean waves background -->
<defs>
<pattern id="waves" patternUnits="userSpaceOnUse" width="100" height="20">
<path d="M0,10 Q25,0 50,10 Q75,20 100,10" stroke="#4682B4" stroke-width="2" fill="none"/>
</pattern>
</defs>
<!-- Sky -->
<rect width="600" height="200" fill="url(#skyGradient)"/>
<!-- Ocean -->
<rect y="200" width="600" height="200" fill="#1E90FF"/>
<rect y="220" width="600" height="180" fill="url(#waves)" opacity="0.3"/>
<!-- Sun -->
<circle cx="500" cy="80" r="40" fill="#FFD700"/>
<g stroke="#FFD700" stroke-width="3">
<line x1="500" y1="20" x2="500" y2="35"/>
<line x1="500" y1="125" x2="500" y2="140"/>
<line x1="440" y1="80" x2="455" y2="80"/>
<line x1="545" y1="80" x2="560" y2="80"/>
<line x1="461" y1="41" x2="472" y2="52"/>
<line x1="528" y1="108" x2="539" y2="119"/>
<line x1="461" y1="119" x2="472" y2="108"/>
<line x1="528" y1="52" x2="539" y2="41"/>
</g>
<!-- Big wave -->
<path d="M50,280 Q150,220 250,250 Q350,280 450,240 Q550,200 600,220 L600,400 L0,400 Z" fill="#0066CC" opacity="0.7"/>
<!-- Surfboard -->
<ellipse cx="280" cy="260" rx="60" ry="8" fill="#FF6B35" transform="rotate(-15 280 260)"/>
<ellipse cx="280" cy="260" rx="55" ry="6" fill="#FF8C42" transform="rotate(-15 280 260)"/>
<!-- Koala body -->
<g transform="translate(280,220) rotate(-10)">
<!-- Body -->
<ellipse cx="0" cy="15" rx="20" ry="25" fill="#8B7355"/>
<!-- Head -->
<circle cx="0" cy="-10" r="18" fill="#A0826D"/>
<!-- Ears -->
<circle cx="-15" cy="-20" r="8" fill="#A0826D"/>
<circle cx="15" cy="-20" r="8" fill="#A0826D"/>
<circle cx="-15" cy="-20" r="5" fill="#8B7355"/>
<circle cx="15" cy="-20" r="5" fill="#8B7355"/>
<!-- Eyes -->
<circle cx="-6" cy="-12" r="2" fill="#000"/>
<circle cx="6" cy="-12" r="2" fill="#000"/>
<circle cx="-5" cy="-13" r="1" fill="#FFF"/>
<circle cx="7" cy="-13" r="1" fill="#FFF"/>
<!-- Nose -->
<ellipse cx="0" cy="-5" rx="2" ry="1.5" fill="#000"/>
<!-- Arms -->
<ellipse cx="-25" cy="5" rx="6" ry="15" fill="#A0826D" transform="rotate(-20)"/>
<ellipse cx="25" cy="5" rx="6" ry="15" fill="#A0826D" transform="rotate(20)"/>
<!-- Legs -->
<ellipse cx="-12" cy="35" rx="5" ry="12" fill="#A0826D"/>
<ellipse cx="12" cy="35" rx="5" ry="12" fill="#A0826D"/>
<!-- Paws -->
<circle cx="-12" cy="45" r="4" fill="#8B7355"/>
<circle cx="12" cy="45" r="4" fill="#8B7355"/>
<circle cx="-25" cy="15" r="4" fill="#8B7355"/>
<circle cx="25" cy="15" r="4" fill="#8B7355"/>
</g>
<!-- Water splash -->
<g opacity="0.6">
<circle cx="200" cy="270" r="3" fill="#87CEEB"/>
<circle cx="210" cy="275" r="2" fill="#87CEEB"/>
<circle cx="360" cy="265" r="4" fill="#87CEEB"/>
<circle cx="370" cy="270" r="2" fill="#87CEEB"/>
<circle cx="380" cy="275" r="3" fill="#87CEEB"/>
</g>
<!-- Flying water droplets -->
<g>
<circle cx="320" cy="200" r="1.5" fill="#4682B4" opacity="0.7"/>
<circle cx="330" cy="195" r="1" fill="#4682B4" opacity="0.7"/>
<circle cx="340" cy="205" r="1.5" fill="#4682B4" opacity="0.7"/>
<circle cx="250" cy="190" r="1" fill="#4682B4" opacity="0.7"/>
</g>
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB"/>
<stop offset="100%" style="stop-color:#E0F6FF"/>
</linearGradient>
</defs>
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Koala Surfing</title>
<style>
body {
background: #aeefff;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<svg viewBox="0 0 500 400" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Sky -->
<rect x="0" y="0" width="500" height="400" fill="#aeefff"/>
<!-- Ocean Waves -->
<ellipse cx="250" cy="340" rx="240" ry="60" fill="#00aadd"/>
<ellipse cx="250" cy="320" rx="180" ry="38" fill="#42bbea" opacity="0.9"/>
<path d="M11 350 Q100 310 250 360 Q400 410 489 340 V400 H11Z" fill="#b2e8fc"/>
<!-- Surfboard Shadow -->
<ellipse cx="250" cy="360" rx="80" ry="10" fill="#0d5d7c" opacity="0.2"/>
<!-- Surfboard -->
<ellipse cx="250" cy="330" rx="90" ry="22" fill="#ffe295" stroke="#de9b6e" stroke-width="3"/>
<ellipse cx="250" cy="335" rx="80" ry="14" fill="none" stroke="#d9b683" stroke-width="3"/>
<!-- Koala Body -->
<ellipse cx="250" cy="255" rx="44" ry="52" fill="#bcbcbc" stroke="#888" stroke-width="2"/>
<!-- Koala Head -->
<ellipse cx="252" cy="205" rx="38" ry="36" fill="#bcbcbc" stroke="#888" stroke-width="2"/>
<!-- Koala Ears -->
<ellipse cx="217" cy="189" rx="18" ry="16" fill="#bcbcbc" stroke="#888" stroke-width="2"/>
<ellipse cx="287" cy="189" rx="18" ry="16" fill="#bcbcbc" stroke="#888" stroke-width="2"/>
<!-- Koala Inner Ears -->
<ellipse cx="217" cy="189" rx="10" ry="9" fill="#ededed" opacity="0.5"/>
<ellipse cx="287" cy="189" rx="10" ry="9" fill="#ededed" opacity="0.5"/>
<!-- Koala Face -->
<!-- Eyes -->
<ellipse cx="240" cy="210" rx="5" ry="7" fill="#333"/>
<ellipse cx="264" cy="210" rx="5" ry="7" fill="#333"/>
<!-- Eyebrows -->
<path d="M233 204 Q238 202 243 204" stroke="#555" stroke-width="2" fill="none"/>
<path d="M257 204 Q262 202 267 204" stroke="#555" stroke-width="2" fill="none"/>
<!-- Nose -->
<ellipse cx="252" cy="218" rx="8" ry="12" fill="#333"/>
<ellipse cx="252" cy="220" rx="5" ry="6" fill="#444"/>
<!-- Mouth -->
<path d="M246 228 Q252 233 258 228" stroke="#a97e6c" stroke-width="2" fill="none"/>
<!-- Koala Arms -->
<!-- Left -->
<ellipse cx="217" cy="265" rx="10" ry="30" fill="#bcbcbc" stroke="#888" stroke-width="2" transform="rotate(-17 217 265)"/>
<!-- Left Paw -->
<ellipse cx="203" cy="290" rx="8" ry="5" fill="#999" stroke="#888" stroke-width="2"/>
<!-- Right -->
<ellipse cx="287" cy="270" rx="10" ry="28" fill="#bcbcbc" stroke="#888" stroke-width="2" transform="rotate(13 287 270)"/>
<!-- Right Paw -->
<ellipse cx="299" cy="294" rx="8" ry="5" fill="#999" stroke="#888" stroke-width="2"/>
<!-- Koala Legs -->
<!-- Left -->
<ellipse cx="235" cy="315" rx="11" ry="24" fill="#bcbcbc" stroke="#888" stroke-width="2" transform="rotate(25 235 315)"/>
<ellipse cx="222" cy="335" rx="7" ry="9" fill="#888"/>
<!-- Right -->
<ellipse cx="260" cy="318" rx="11" ry="23" fill="#bcbcbc" stroke="#888" stroke-width="2" transform="rotate(-19 260 318)"/>
<ellipse cx="273" cy="336" rx="7" ry="9" fill="#888"/>
<!-- Splash effect under board -->
<ellipse cx="170" cy="340" rx="14" ry="6" fill="#ffffff" opacity="0.6"/>
<ellipse cx="185" cy="350" rx="11" ry="4" fill="#ffffff" opacity="0.6"/>
<ellipse cx="220" cy="365" rx="20" ry="6" fill="#ffffff" opacity="0.5"/>
<ellipse cx="295" cy="355" rx="18" ry="7" fill="#ffffff" opacity="0.5"/>
<ellipse cx="320" cy="344" rx="11" ry="4" fill="#ffffff" opacity="0.3"/>
<!-- Board Fin -->
<ellipse cx="335" cy="344" rx="9" ry="4" fill="#91a2b2" opacity="0.6" transform="rotate(-15 335 344)"/>
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Koala Surfing SVG</title>
</head>
<body>
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<!-- Waves -->
<path d="M-50,350 C50,300 150,380 250,350 C350,320 450,380 550,350"
stroke="#00BFFF" stroke-width="20" fill="none" stroke-linecap="round"/>
<path d="M-50,370 C50,330 150,400 250,370 C350,340 450,400 550,370"
stroke="#87CEEB" stroke-width="15" fill="none" stroke-linecap="round"/>
<!-- Surfboard -->
<ellipse cx="250" cy="330" rx="180" ry="20" fill="#FFA500" stroke="#E69400" stroke-width="4"/>
<line x1="70" y1="330" x2="430" y2="330" stroke="#E69400" stroke-width="2"/>
<!-- Koala Body -->
<ellipse cx="250" cy="260" rx="40" ry="60" fill="#B0B0B0" stroke="#888" stroke-width="2"/>
<!-- Koala Head -->
<circle cx="250" cy="200" r="50" fill="#B0B0B0" stroke="#888" stroke-width="2"/>
<!-- Ears -->
<circle cx="200" cy="150" r="25" fill="#B0B0B0" stroke="#888" stroke-width="2"/>
<circle cx="300" cy="150" r="25" fill="#B0B0B0" stroke="#888" stroke-width="2"/>
<circle cx="200" cy="150" r="12" fill="#E0E0E0"/>
<circle cx="300" cy="150" r="12" fill="#E0E0E0"/>
<!-- Eyes -->
<circle cx="235" cy="190" r="8" fill="#000"/>
<circle cx="265" cy="190" r="8" fill="#000"/>
<circle cx="235" cy="190" r="4" fill="#FFF"/>
<circle cx="265" cy="190" r="4" fill="#FFF"/>
<!-- Nose -->
<ellipse cx="250" cy="215" rx="12" ry="16" fill="#333"/>
<!-- Mouth -->
<path d="M240,230 Q250,240 260,230" stroke="#555" stroke-width="2" fill="none"/>
<!-- Arms -->
<path d="M215,235 Q185,250 200,270" fill="none" stroke="#888" stroke-width="12" stroke-linecap="round"/>
<path d="M285,235 Q315,250 300,270" fill="none" stroke="#888" stroke-width="12" stroke-linecap="round"/>
<!-- Legs -->
<path d="M230,315 Q210,330 230,340" fill="none" stroke="#888" stroke-width="14" stroke-linecap="round"/>
<path d="M270,315 Q290,330 270,340" fill="none" stroke="#888" stroke-width="14" stroke-linecap="round"/>
<!-- Shirt (optional fun detail) -->
<ellipse cx="250" cy="285" rx="35" ry="20" fill="#FF6666" opacity="0.8"/>
</svg>
</body>
</html>
```Drag to resize
Of course! Here is an SVG of a koala enjoying the waves.
```html
<!DOCTYPE html>
<html>
<head>
<title>Koala Surfing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f8ff;
}
svg {
width: 90%;
max-width: 800px;
height: auto;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<!-- Defs for gradients -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFDAB9;stop-opacity:1" />
</linearGradient>
<linearGradient id="waveGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#0077BE;" />
<stop offset="100%" style="stop-color:#00A1E0;" />
</linearGradient>
</defs>
<!-- Background: Sky and Sun -->
<rect width="800" height="600" fill="url(#skyGradient)" />
<circle cx="100" cy="120" r="50" fill="#FFD700" opacity="0.9" />
<!-- The Wave -->
<path d="M -10,610 L -10,350 C 100,200 300,200 450,320 C 550,380 650,350 810,280 L 810,610 Z" fill="url(#waveGradient)" />
<path d="M 400,380 C 500,300 650,300 810,350 L 810,280 C 650,350 550,380 450,320 C 300,200 100,200 -10,350 L -10,250 C 150,150 350,180 400,380 Z" fill="#4db8ff" />
<!-- Wave Crest / Foam -->
<path d="M -10,250 C 150,150 350,180 400,380 C 405,395 410,390 415,380 C 400,200 340,160 150,160 C 100,165 40,180 -10,240 Z" fill="white" opacity="0.8"/>
<path d="M -10,250 C 150,150 350,180 430,350 C 425,330 400,220 350,180 C 200,150 100,170 -10,250 Z" fill="white"/>
<!-- Water Splashes -->
<circle cx="200" cy="480" r="15" fill="white" opacity="0.5"/>
<circle cx="230" cy="470" r="8" fill="white" opacity="0.6"/>
<circle cx="550" cy="520" r="25" fill="white" opacity="0.4"/>
<circle cx="590" cy="500" r="12" fill="white" opacity="0.5"/>
<circle cx="120" cy="550" r="20" fill="white" opacity="0.4"/>
<!-- Surfer Group (Koala + Board) -->
<g transform="translate(300, 290) rotate(5)">
<!-- Surfboard -->
<path d="M -120,80 C -40,125 100,125 180,70 L 160,50 C 80,95 -60,95 -140,60 Z" fill="#ff4136" stroke="#333" stroke-width="3"/>
<path d="M -100,75 C -30,110 80,110 145,70 L 140,60 C 80,95 -30,95 -105,65 Z" fill="#ffdc00" />
<path d="M 120,88 L 140,105 L 110,108 Z" fill="#ff4136" stroke="#333" stroke-width="2"/>
<!-- Koala -->
<g id="koala" transform="translate(20, -10)">
<!-- Body -->
<path d="M -40,80 C -60,20 -20,-20 20,-20 C 60,-20 80,20 60,80 Z" fill="#a9a9a9" stroke="#555" stroke-width="2.5" />
<!-- Arms and Legs -->
<path d="M -25,20 C -50,30 -55,60 -40,75" stroke="#555" stroke-width="12" stroke-linecap="round" fill="none"/>
<path d="M 25,25 C 55,30 70,60 50,78" stroke="#555" stroke-width="13" stroke-linecap="round" fill="none"/>
<path d="M -25,20 C -50,30 -55,60 -40,75" stroke="#a9a9a9" stroke-width="8" stroke-linecap="round" fill="none"/>
<path d="M 25,25 C 55,30 70,60 50,78" stroke="#a9a9a9" stroke-width="9" stroke-linecap="round" fill="none"/>
<path d="M 40,5 C 80,-10 90,30 65,40" stroke="#555" stroke-width="12" stroke-linecap="round" fill="none"/>
<path d="M 40,5 C 80,-10 90,30 65,40" stroke="#a9a9a9" stroke-width="8" stroke-linecap="round" fill="none"/>
<!-- Head -->
<circle cx="0" cy="0" r="30" fill="#a9a9a9" stroke="#555" stroke-width="2.5" />
<!-- Ears -->
<g id="left-ear">
<circle cx="-30" cy="-20" r="18" fill="#a9a9a9" stroke="#555" stroke-width="2.5" />
<circle cx="-30" cy="-20" r="11" fill="#d3d3d3" />
</g>
<g id="right-ear">
<circle cx="30" cy="-20" r="18" fill="#a9a9a9" stroke="#555" stroke-width="2.5" />
<circle cx="30" cy="-20" r="11" fill="#d3d3d3" />
</g>
<!-- Face -->
<ellipse cx="0" cy="5" rx="15" ry="10" fill="#333333"/>
<path d="M -12, -5 C -8,-2 -4,-5" stroke="#333333" stroke-width="2" fill="none" stroke-linecap="round"/>
<path d="M 12, -5 C 8,-2 4,-5" stroke="#333333" stroke-width="2" fill="none" stroke-linecap="round"/>
</g>
</g>
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Koala Surfing (SVG)</title>
<style>
body{
margin:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#cceeff; /* sky */
}
svg{
border:1px solid #00000011;
box-shadow:0 4px 12px #00000033;
border-radius:8px;
}
</style>
</head>
<body>
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<!-- Ocean -->
<rect x="0" y="200" width="400" height="200" fill="#0099ff"/>
<!-- Gentle waves -->
<path d="
M0 200
Q20 180 40 200 T80 200 T120 200 T160 200 T200 200 T240 200 T280 200 T320 200 T360 200 T400 200
L400 220
Q380 200 360 220 T320 220 T280 220 T240 220 T200 220 T160 220 T120 220 T80 220 T40 220 T0 220 Z"
fill="#33bbff"/>
<!-- Surfboard -->
<g transform="translate(200 230) rotate(-10)">
<ellipse cx="0" cy="0" rx="90" ry="20" fill="#ffcc00" stroke="#e6a700" stroke-width="3"/>
<!-- simple highlight -->
<ellipse cx="-65" cy="-2" rx="12" ry="4" fill="rgba(255,255,255,0.4)"/>
</g>
<!-- Koala -->
<g id="koala" transform="translate(200 150)">
<!-- Body -->
<ellipse cx="0" cy="60" rx="35" ry="45" fill="#b3b3b3" stroke="#666" stroke-width="2"/>
<!-- Head -->
<circle cx="0" cy="0" r="40" fill="#d1d1d1" stroke="#666" stroke-width="2"/>
<!-- Ears -->
<g>
<circle cx="-35" cy="-15" r="20" fill="#d1d1d1" stroke="#666" stroke-width="2"/>
<circle cx="35" cy="-15" r="20" fill="#d1d1d1" stroke="#666" stroke-width="2"/>
<circle cx="-35" cy="-15" r="12" fill="#ffccdd"/>
<circle cx="35" cy="-15" r="12" fill="#ffccdd"/>
</g>
<!-- Eyes -->
<circle cx="-15" cy="-5" r="6" fill="#000"/>
<circle cx="15" cy="-5" r="6" fill="#000"/>
<!-- Nose -->
<ellipse cx="0" cy="10" rx="10" ry="14" fill="#222"/>
<!-- Smile -->
<path d="M-8 22 Q0 28 8 22" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Arms -->
<g stroke="#666" stroke-width="2" fill="none">
<path d="M-25 40 Q-45 60 -35 70"/>
<path d="M25 40 Q45 60 35 70"/>
</g>
<!-- Legs -->
<g stroke="#666" stroke-width="2" fill="none">
<path d="M-20 95 Q-30 120 -10 120"/>
<path d="M20 95 Q30 120 10 120"/>
</g>
</g>
<!-- Splash for motion -->
<path d="M185 240 q15 -10 30 0 t30 0" stroke="#33bbff" stroke-width="4" fill="none" stroke-linecap="round"/>
</svg>
</body>
</html>
```Drag to resize
```html <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <!-- Background water --> <rect width="100%" height="100%" fill="#87CEEB"/> <!-- Surfboard --> <path d="M100,220 Q200,160 300,220 Q250,260 100,220 Z" fill="#191970"/> <!-- Koala body --> <circle cx="200" cy="160" r="40" fill="#555"/> <!-- Head --> <circle cx="200" cy="100" r="30" fill="#666"/> <!-- Ears --> <circle cx="170" cy="70" r="10" fill="#666"/> <circle cx="230" cy="70" r="10" fill="#666"/> <!-- Inner ears --> <circle cx="170" cy="70" r="5" fill="#FFC0CB"/> <circle cx="230" cy="70" r="5" fill="#FFC0CB"/> <!-- Eyes --> <circle cx="185" cy="90" r="5" fill="white"/> <circle cx="215" cy="90" r="5" fill="white"/> <!-- Pupils --> <circle cx="185" cy="90" r="2" fill="black"/> <circle cx="215" cy="90" r="2" fill="black"/> <!-- Nose --> <ellipse cx="200" cy="110" rx="5" ry="3" fill="#333"/> <!-- Arms --> <rect x="140" y="140" width="20" height="40" fill="#444" transform="rotate(-45 140 140)"/> <rect x="240" y="140" width="20" height="40" fill="#444" transform="rotate(45 260 140)"/> <!-- Legs --> <rect x="170" y="190" width="20" height="40" fill="#444" transform="rotate(-10 180 190)"/> <rect x="210" y="190" width="20" height="40" fill="#444" transform="rotate(10 220 190)"/> <!-- Wave --> <path d="M0,230 Q50,240 100,230 T200,230 T300,230 T400,230 V300 H0 Z" fill="#87CEEB"/> </svg> ```
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Koala Surfing SVG</title>
<style>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f8ff; }
</style>
</head>
<body>
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Background sky -->
<rect x="0" y="0" width="400" height="200" fill="lightblue" />
<!-- Wave -->
<path d="M0 250 Q100 200 200 250 T400 250 L400 300 L0 300 Z" fill="blue" />
<path d="M0 230 Q80 180 160 230 T320 230" stroke="white" stroke-width="4" fill="none" />
<!-- Surfboard -->
<rect x="140" y="220" width="120" height="15" rx="7" fill="yellow" stroke="orange" stroke-width="2" />
<!-- Koala body -->
<ellipse cx="200" cy="190" rx="25" ry="35" fill="gray" />
<!-- Koala head -->
<circle cx="200" cy="150" r="20" fill="gray" />
<!-- Ears -->
<circle cx="180" cy="135" r="10" fill="gray" />
<circle cx="220" cy="135" r="10" fill="gray" />
<!-- Inner ears -->
<circle cx="180" cy="135" r="6" fill="pink" />
<circle cx="220" cy="135" r="6" fill="pink" />
<!-- Eyes -->
<circle cx="190" cy="145" r="3" fill="black" />
<circle cx="210" cy="145" r="3" fill="black" />
<circle cx="189" cy="144" r="1" fill="white" />
<circle cx="209" cy="144" r="1" fill="white" />
<!-- Nose -->
<ellipse cx="200" cy="155" rx="5" ry="3" fill="black" />
<!-- Mouth -->
<path d="M195 160 Q200 165 205 160" stroke="black" stroke-width="1" fill="none" />
<!-- Arms (surfing pose) -->
<path d="M180 180 Q160 160 150 190" stroke="gray" stroke-width="8" stroke-linecap="round" fill="none" />
<path d="M220 180 Q240 160 250 190" stroke="gray" stroke-width="8" stroke-linecap="round" fill="none" />
<!-- Legs -->
<path d="M190 220 Q180 240 170 230" stroke="gray" stroke-width="8" stroke-linecap="round" fill="none" />
<path d="M210 220 Q220 240 230 230" stroke="gray" stroke-width="8" stroke-linecap="round" fill="none" />
</svg>
</body>
</html>
```Drag to resize
Here's an SVG of a koala surfing on a wave:
```html
<!DOCTYPE html>
<html>
<head>
<title>Surfing Koala SVG</title>
</head>
<body>
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<!-- Ocean background -->
<rect width="400" height="300" fill="#1E88E5" />
<!-- Wave -->
<path d="M0,150 Q100,100 200,150 T400,150" fill="#64B5F6" />
<path d="M0,180 Q100,130 200,180 T400,180" fill="#42A5F5" />
<path d="M0,210 Q100,160 200,210 T400,210" fill="#2196F3" />
<!-- Surfboard -->
<ellipse cx="200" cy="130" rx="80" ry="15" fill="#FF5722" />
<ellipse cx="200" cy="130" rx="70" ry="10" fill="#FF7043" />
<!-- Koala body -->
<circle cx="200" cy="100" r="30" fill="#E0E0E0" />
<!-- Koala head -->
<circle cx="200" cy="70" r="25" fill="#E0E0E0" />
<!-- Koala ears -->
<circle cx="170" cy="60" r="12" fill="#E0E0E0" />
<circle cx="230" cy="60" r="12" fill="#E0E0E0" />
<!-- Koala face -->
<circle cx="190" cy="65" r="4" fill="#212121" />
<circle cx="210" cy="65" r="4" fill="#212121" />
<path d="M190,80 Q200,90 210,80" stroke="#212121" stroke-width="2" fill="none" />
<!-- Koala arms -->
<path d="M170,100 Q160,120 180,120" stroke="#E0E0E0" stroke-width="8" fill="none" />
<path d="M230,100 Q240,120 220,120" stroke="#E0E0E0" stroke-width="8" fill="none" />
<!-- Splash effect -->
<circle cx="250" cy="150" r="10" fill="white" opacity="0.7" />
<circle cx="220" cy="160" r="8" fill="white" opacity="0.7" />
<circle cx="280" cy="140" r="6" fill="white" opacity="0.7" />
<!-- Sun -->
<circle cx="350" cy="50" r="30" fill="#FFEB3B" />
</svg>
</body>
</html>
```
This SVG features:
1. A blue ocean background with waves
2. An orange surfboard
3. A cute gray koala with classic facial features
4. Splash effects around the board
5. A sun in the corner
You can adjust the colors, sizes, or positions as needed. The koala is shown in a simple cartoon style with basic shapes.Drag to resize
Below is an SVG code for a simple illustration of a koala surfing. You can copy and paste this code into an HTML file or an SVG viewer to render it. ```html <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="400" height="300"> <!-- Background: Ocean --> <rect x="0" y="0" width="400" height="300" fill="#87CEEB"/> <!-- Wave --> <path d="M0 200 Q100 150, 200 200 T400 200 L400 300 L0 300 Z" fill="#4682B4"/> <!-- Surfboard --> <rect x="150" y="220" width="100" height="20" rx="5" ry="5" fill="#FFD700"/> <!-- Koala Body --> <ellipse cx="200" cy="180" rx="30" ry="40" fill="#8B4513"/> <!-- Koala Head --> <circle cx="200" cy="140" r="25" fill="#8B4513"/> <!-- Koala Ears --> <ellipse cx="180" cy="120" rx="10" ry="20" fill="#8B4513"/> <ellipse cx="220" cy="120" rx="10" ry="20" fill="#8B4513"/> <!-- Koala Eyes --> <circle cx="190" cy="145" r="3" fill="#FFFFFF"/> <circle cx="210" cy="145" r="3" fill="#FFFFFF"/> <!-- Koala Nose --> <ellipse cx="200" cy="155" rx="5" ry="3" fill="#000000"/> <!-- Koala Arms --> <line x1="170" y1="180" x2="140" y2="200" stroke="#8B4513" stroke-width="5"/> <line x1="230" y1="180" x2="260" y2="200" stroke="#8B4513" stroke-width="5"/> <!-- Koala Legs --> <line x1="180" y1="220" x2="170" y2="240" stroke="#8B4513" stroke-width="5"/> <line x1="220" y1="220" x2="230" y2="240" stroke="#8B4513" stroke-width="5"/> </svg> ``` This SVG creates a simple, stylized illustration of a koala riding a surfboard on a wave. You can embed this directly into an HTML file or use it in any SVG-compatible environment.
Drag to resize
Here's a complete HTML file with an SVG of a koala surfing. The SVG is embedded directly in the HTML, and no external libraries are required.
```html
<!DOCTYPE html>
<html>
<head>
<title>Koala Surfing</title>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<!-- Ocean -->
<rect x="0" y="150" width="500" height="150" fill="#1E90FF" />
<!-- Wave -->
<path d="M0,200 Q125,150 250,200 T500,200 L500,300 L0,300 Z" fill="white" opacity="0.7" />
<!-- Surfboard -->
<rect x="300" y="180" width="120" height="20" fill="#8B4513" rx="5" />
<!-- Koala -->
<circle cx="360" cy="160" r="30" fill="grey" />
<circle cx="345" cy="150" r="10" fill="white" />
<circle cx="375" cy="150" r="10" fill="white" />
<circle cx="360" cy="170" r="8" fill="black" />
<ellipse cx="360" cy="190" rx="15" ry="20" fill="grey" />
<rect x="345" y="180" width="30" height="20" fill="grey" rx="5" />
<!-- Surfboard details -->
<rect x="320" y="170" width="20" height="5" fill="#A0522D" />
<rect x="380" y="170" width="20" height="5" fill="#A0522D" />
</svg>
</body>
</html>
```
This HTML file includes an SVG of a koala surfing on a wave. The koala is depicted in a simple, cartoon-like style, and the surfboard is brown with some details. The ocean is represented by a blue rectangle, and a white wave adds some dynamic to the scene.Drag to resize
```html <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <!-- Wave --> <path d="M0,300 Q100,350 200,300 T400,300 T600,300 T800,300 V600 H0 Z" fill="#87CEEB" /> <!-- Surfboard --> <rect x="350" y="320" width="100" height="20" fill="#964B00" rx="5" /> <!-- Koala --> <ellipse cx="400" cy="280" rx="30" ry="40" fill="#AAAAAA" /> <ellipse cx="380" cy="260" rx="10" ry="10" fill="#000000" /> <ellipse cx="420" cy="260" rx="10" ry="10" fill="#000000" /> <path d="M400,290 Q410,300 400,310" stroke="#000000" stroke-width="5" fill="none" /> <!-- Koala's arms and legs --> <line x1="370" y1="290" x2="340" y2="310" stroke="#AAAAAA" stroke-width="15" /> <line x1="430" y1="290" x2="460" y2="310" stroke="#AAAAAA" stroke-width="15" /> <line x1="400" y1="310" x2="400" y2="340" stroke="#AAAAAA" stroke-width="15" /> <!-- Sun --> <circle cx="700" cy="100" r="80" fill="#FFFF00" /> </svg> ```
Drag to resize
```html
<html>
<head>
<title>Koala Surfing</title>
</head>
<body>
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Surfboard -->
<rect x="50" y="250" width="300" height="30" fill="brown" />
<!-- Koala body -->
<ellipse cx="200" cy="200" rx="50" ry="70" fill="gray" />
<!-- Koala head -->
<circle cx="200" cy="150" r="40" fill="gray" />
<!-- Koala ears -->
<circle cx="170" cy="130" r="15" fill="gray" />
<circle cx="230" cy="130" r="15" fill="gray" />
<!-- Koala arms -->
<line x1="150" y1="180" x2="100" y2="220" stroke="black" stroke-width="5" />
<line x1="250" y1="180" x2="300" y2="220" stroke="black" stroke-width="5" />
</svg>
</body>
</html>
```Drag to resize