benchmaxx catbench
Write a SVG animation that draws a cute kitten using html and css.
Prompt
Write a SVG animation that draws a cute kitten using html and css.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Kitten Drawing Animation</title>
<style>
body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #ffeaa7, #fab1a0);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
h1 {
color: #2d3436;
margin-bottom: 20px;
font-size: 2em;
}
svg {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: visible;
}
/* Animation keyframes for drawing effect */
.draw-animation {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 3s ease-in-out forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
/* Delayed animations for different parts */
.head { animation-delay: 0s; }
.ear-left { animation-delay: 0.5s; }
.ear-right { animation-delay: 0.7s; }
.eye-left { animation-delay: 1.2s; }
.eye-right { animation-delay: 1.4s; }
.nose { animation-delay: 1.8s; }
.mouth { animation-delay: 2s; }
.whiskers { animation-delay: 2.5s; }
.body { animation-delay: 3s; }
.paws { animation-delay: 3.5s; }
.tail { animation-delay: 4s; }
/* Fill animations */
.fill-animation {
opacity: 0;
animation: fadeIn 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fill-head { animation-delay: 3.2s; }
.fill-ears { animation-delay: 3.4s; }
.fill-body { animation-delay: 4.2s; }
.fill-tail { animation-delay: 4.5s; }
/* Blinking animation for eyes */
.blink {
animation: blink 3s infinite;
animation-delay: 5s;
}
@keyframes blink {
0%, 90%, 100% { transform: scaleY(1); }
95% { transform: scaleY(0.1); }
}
/* Tail wagging animation */
.wag {
transform-origin: 180 320;
animation: wag 2s ease-in-out infinite;
animation-delay: 5s;
}
@keyframes wag {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>🐱 Drawing a Cute Kitten 🐱</h1>
<svg width="400" height="400" viewBox="0 0 400 400">
<!-- Head outline -->
<ellipse cx="200" cy="180" rx="80" ry="70"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation head"/>
<!-- Head fill -->
<ellipse cx="200" cy="180" rx="80" ry="70"
fill="#ffeaa7" stroke="none"
class="fill-animation fill-head"/>
<!-- Left ear outline -->
<path d="M 140 130 Q 130 100 160 110 Q 170 120 165 140"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation ear-left"/>
<!-- Right ear outline -->
<path d="M 260 130 Q 270 100 240 110 Q 230 120 235 140"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation ear-right"/>
<!-- Ear fills -->
<path d="M 140 130 Q 130 100 160 110 Q 170 120 165 140"
fill="#ffeaa7" stroke="none"
class="fill-animation fill-ears"/>
<path d="M 260 130 Q 270 100 240 110 Q 230 120 235 140"
fill="#ffeaa7" stroke="none"
class="fill-animation fill-ears"/>
<!-- Inner ears -->
<path d="M 145 125 Q 140 110 155 115 Q 165 120 160 135"
fill="#fd79a8" stroke="none"
class="fill-animation fill-ears"/>
<path d="M 255 125 Q 260 110 245 115 Q 235 120 240 135"
fill="#fd79a8" stroke="none"
class="fill-animation fill-ears"/>
<!-- Left eye -->
<ellipse cx="175" cy="165" rx="12" ry="15"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation eye-left"/>
<!-- Right eye -->
<ellipse cx="225" cy="165" rx="12" ry="15"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation eye-right"/>
<!-- Eye fills that will blink -->
<ellipse cx="175" cy="165" rx="12" ry="15"
fill="#2d3436"
class="fill-animation fill-head blink"/>
<ellipse cx="225" cy="165" rx="12" ry="15"
fill="#2d3436"
class="fill-animation fill-head blink"/>
<!-- Eye highlights -->
<circle cx="180" cy="160" r="4" fill="white"
class="fill-animation fill-head" style="animation-delay: 3.5s;"/>
<circle cx="230" cy="160" r="4" fill="white"
class="fill-animation fill-head" style="animation-delay: 3.5s;"/>
<!-- Nose -->
<path d="M 200 185 L 192 195 L 208 195 Z"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation nose"/>
<path d="M 200 185 L 192 195 L 208 195 Z"
fill="#fd79a8"
class="fill-animation fill-head"/>
<!-- Mouth -->
<path d="M 200 195 Q 190 205 180 200"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation mouth"/>
<path d="M 200 195 Q 210 205 220 200"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation mouth"/>
<!-- Whiskers -->
<g class="draw-animation whiskers">
<line x1="130" y1="175" x2="160" y2="180" stroke="#2d3436" stroke-width="2"/>
<line x1="125" y1="190" x2="155" y2="190" stroke="#2d3436" stroke-width="2"/>
<line x1="240" y1="180" x2="270" y2="175" stroke="#2d3436" stroke-width="2"/>
<line x1="245" y1="190" x2="275" y2="190" stroke="#2d3436" stroke-width="2"/>
</g>
<!-- Body outline -->
<ellipse cx="200" cy="300" rx="60" ry="80"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation body"/>
<!-- Body fill -->
<ellipse cx="200" cy="300" rx="60" ry="80"
fill="#ffeaa7" stroke="none"
class="fill-animation fill-body"/>
<!-- Paws -->
<g class="draw-animation paws">
<ellipse cx="170" cy="370" rx="15" ry="10" fill="none" stroke="#2d3436" stroke-width="3"/>
<ellipse cx="230" cy="370" rx="15" ry="10" fill="none" stroke="#2d3436" stroke-width="3"/>
</g>
<ellipse cx="170" cy="370" rx="15" ry="10" fill="#ffeaa7" class="fill-animation fill-body"/>
<ellipse cx="230" cy="370" rx="15" ry="10" fill="#ffeaa7" class="fill-animation fill-body"/>
<!-- Tail -->
<path d="M 140 320 Q 100 300 80 340 Q 70 360 90 380 Q 120 390 140 360"
fill="none" stroke="#2d3436" stroke-width="3"
class="draw-animation tail wag"/>
<!-- Tail fill -->
<path d="M 140 320 Q 100 300 80 340 Q 70 360 90 380 Q 120 390 140 360"
fill="#ffeaa7" stroke="none"
class="fill-animation fill-tail wag"/>
<!-- Stripes on tail -->
<g class="fill-animation fill-tail wag" style="animation-delay: 4.8s;">
<ellipse cx="110" cy="330" rx="8" ry="15" fill="#e17055" transform="rotate(45 110 330)"/>
<ellipse cx="95" cy="355" rx="6" ry="12" fill="#e17055" transform="rotate(30 95 355)"/>
</g>
<!-- Face stripes -->
<g class="fill-animation fill-head" style="animation-delay: 4s;">
<path d="M 160 150 Q 170 145 175 155" fill="none" stroke="#e17055" stroke-width="2"/>
<path d="M 225 155 Q 230 145 240 150" fill="none" stroke="#e17055" stroke-width="2"/>
</g>
</svg>
</div>
</body>
</html>
```
This HTML file creates an adorable SVG animation that draws a cute kitten step by step! The animation includes:
🎨 **Drawing sequence:**
1. Head outline appears first
2. Ears are drawn next
3. Eyes, nose, and mouth follow
4. Whiskers appear
5. Body and paws are drawn
6. Finally, the tail is added
✨ **Special effects:**
- Each part fills with color after being drawn
- The kitten blinks its eyes once the drawing is complete
- The tail wags gently
- Cute pink inner ears and nose
- Decorative stripes on the face and tail
The animation uses SVG path drawing techniques with `stroke-dasharray` and `stroke-dashoffset` to create the effect of the kitten being drawn line by line. The whole sequence takes about 5 seconds, followed by the cute blinking and tail wagging animations that loop indefinitely.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cute Kitten SVG Animation</title>
<style>
body {
background: #f7e8ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
svg {
width: 340px;
height: 320px;
display: block;
}
.draw {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 1.5s forwards;
}
.feature {
stroke-dasharray: 250;
stroke-dashoffset: 250;
animation: draw 0.8s 1s forwards;
}
.tail {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 1s 1s forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.fill-in {
opacity: 0;
animation: fillin 0.8s 2s forwards;
}
@keyframes fillin {
to {
opacity: 1;
}
}
/* Blinking animation for eyes */
.eye {
animation: eye-blink 5s 2.8s infinite;
transform-origin: center;
}
@keyframes eye-blink {
0%, 92%, 97%, 100% { transform: scaleY(1);}
94%, 96% { transform: scaleY(0.15);}
}
/* Purr animation for tail */
.tail-group {
transform-origin: 70px 200px;
animation: tail-purr 2s 2.4s infinite ease-in-out alternate;
}
@keyframes tail-purr {
0% { transform: rotate(-6deg);}
50% { transform: rotate(10deg);}
100% { transform: rotate(-6deg);}
}
</style>
</head>
<body>
<svg viewBox="0 0 340 320">
<!-- Tail -->
<g class="tail-group">
<path
class="tail"
d="M72 210 Q40 250, 70 265 Q120 285, 100 250 Q90 240, 137 240"
stroke="#A07860"
stroke-width="7"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<!-- Body & Head outline -->
<path
class="draw"
style="animation-delay:0.1s"
d="M100 250
Q80 240 90 200
Q70 160 120 180
Q130 150 170 185
Q210 150 220 180
Q260 160 250 200
Q260 240 240 250
Q220 265 170 260
Q120 265 100 250
Z
M130 110
Q115 85 150 80
Q175 30 195 80
Q232 70 222 110
Q255 120 225 132
Q215 170 170 149
Q125 170 115 132
Q86 120 130 110
Z"
stroke="#A07860"
stroke-width="7"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
/>
<!-- Fill: Ears, face, body (fades in)-->
<g class="fill-in">
<!-- Body -->
<path
d="M100 250
Q80 240 90 200
Q70 160 120 180
Q130 150 170 185
Q210 150 220 180
Q260 160 250 200
Q260 240 240 250
Q220 265 170 260
Q120 265 100 250
Z"
fill="#FCEED5"
stroke="none"
/>
<!-- Head -->
<path
d="M130 110
Q115 85 150 80
Q175 30 195 80
Q232 70 222 110
Q255 120 225 132
Q215 170 170 149
Q125 170 115 132
Q86 120 130 110
Z"
fill="#FCEED5"
stroke="none"
/>
<!-- Cheek blush left -->
<ellipse
cx="130"
cy="155"
rx="13"
ry="8"
fill="#FFB7CC"
opacity="0.67"
/>
<!-- Cheek blush right -->
<ellipse
cx="210"
cy="155"
rx="13"
ry="8"
fill="#FFB7CC"
opacity="0.67"
/>
<!-- Inner ears -->
<ellipse
cx="145"
cy="92"
rx="12"
ry="10"
fill="#F9C6E1"
opacity="0.76"
/>
<ellipse
cx="210"
cy="95"
rx="11"
ry="8"
fill="#F9C6E1"
opacity="0.76"
/>
<!-- Belly -->
<ellipse
cx="172"
cy="230"
rx="36"
ry="28"
fill="#FFF5E1"
opacity="0.7"
/>
<!-- Paw left -->
<ellipse
cx="130"
cy="254"
rx="15"
ry="11"
fill="#FCEED5"
/>
<!-- Paw right -->
<ellipse
cx="205"
cy="254"
rx="15"
ry="11"
fill="#FCEED5"
/>
<!-- Paw pads -->
<ellipse
cx="130"
cy="261"
rx="5"
ry="2.5"
fill="#FFB7CC"
/>
<ellipse
cx="205"
cy="261"
rx="5"
ry="2.5"
fill="#FFB7CC"
/>
<!-- Little paw toes left -->
<ellipse
cx="123"
cy="260"
rx="1.6"
ry="1"
fill="#FFB7CC"
/>
<ellipse
cx="127"
cy="263"
rx="1.4"
ry="1"
fill="#FFB7CC"
/>
<ellipse
cx="133"
cy="263"
rx="1.4"
ry="1"
fill="#FFB7CC"
/>
<!-- Little paw toes right -->
<ellipse
cx="198"
cy="260"
rx="1.6"
ry="1"
fill="#FFB7CC"
/>
<ellipse
cx="203"
cy="263"
rx="1.4"
ry="1"
fill="#FFB7CC"
/>
<ellipse
cx="209"
cy="263"
rx="1.4"
ry="1"
fill="#FFB7CC"
/>
</g>
<!-- Left Eye -->
<ellipse
class="feature eye"
style="animation-delay:2.4s"
cx="145"
cy="138"
rx="10"
ry="13"
fill="#232323"
stroke="#392111"
stroke-width="2"
/>
<!-- Right Eye -->
<ellipse
class="feature eye"
style="animation-delay:2.55s"
cx="195"
cy="138"
rx="10"
ry="13"
fill="#232323"
stroke="#392111"
stroke-width="2"
/>
<!-- Nose -->
<ellipse
class="feature"
style="animation-delay:2.7s"
cx="170"
cy="153"
rx="6"
ry="4"
fill="#FFB7CC"
stroke="#a07860"
stroke-width="2"
/>
<!-- Mouth (smile) -->
<path
class="feature"
style="animation-delay:2.9s"
d="M170 157 Q173 164 180 161"
stroke="#B23B63"
stroke-width="2.5"
fill="none"
stroke-linecap="round"
/>
<path
class="feature"
style="animation-delay:2.91s"
d="M170 157 Q167 164 160 161"
stroke="#B23B63"
stroke-width="2.5"
fill="none"
stroke-linecap="round"
/>
<!-- Whiskers Left -->
<path
class="feature"
style="animation-delay:3.1s"
d="M142 156 Q125 153 115 148"
stroke="#a07860"
stroke-width="2"
fill="none"
stroke-linecap="round"
/>
<path
class="feature"
style="animation-delay:3.12s"
d="M140 160 Q124 164 109 163"
stroke="#a07860"
stroke-width="2"
fill="none"
stroke-linecap="round"
/>
<path
class="feature"
style="animation-delay:3.13s"
d="M142 165 Q125 175 115 175"
stroke="#a07860"
stroke-width="2"
fill="none"
stroke-linecap="round"
/>
<!-- Whiskers Right -->
<path
class="feature"
style="animation-delay:3.15s"
d="M198 157 Q220 153 232 148"
stroke="#a07860"
stroke-width="2"
fill="none"
stroke-linecap="round"
/>
<path
class="feature"
style="animation-delay:3.16s"
d="M200 160 Q219 164 232 163"
stroke="#a07860"
stroke-width="2"
fill="none"
stroke-linecap="round"
/>
<path
class="feature"
style="animation-delay:3.17s"
d="M198 165 Q220 175 232 175"
stroke="#a07860"
stroke-width="2"
fill="none"
stroke-linecap="round"
/>
<!-- Shine in left eye -->
<ellipse
class="feature"
style="animation-delay:3.3s"
cx="148"
cy="133"
rx="2.3"
ry="3"
fill="#fff"
opacity="0.8"
/>
<!-- Shine in right eye -->
<ellipse
class="feature"
style="animation-delay:3.33s"
cx="198"
cy="133"
rx="2.3"
ry="3"
fill="#fff"
opacity="0.8"
/>
</svg>
</body>
</html>
```
Drag to resize
Here's a complete HTML file with an SVG animation of a cute kitten using only HTML and CSS. The animation draws the kitten using SVG paths and animates them with CSS:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
svg {
width: 300px;
height: 300px;
}
.kitten-part {
opacity: 0;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 2s forwards;
}
.kitten-head {
animation-delay: 0.5s;
fill: #f5d5b0;
stroke: #333;
}
.kitten-ears {
animation-delay: 1s;
fill: #f5d5b0;
stroke: #333;
}
.kitten-eyes {
animation-delay: 1.5s;
fill: white;
stroke: #333;
}
.kitten-pupils {
animation-delay: 2s;
fill: #333;
}
.kitten-nose {
animation-delay: 2.5s;
fill: #ff9999;
stroke: #333;
}
.kitten-mouth {
animation-delay: 3s;
stroke: #333;
fill: none;
}
.kitten-body {
animation-delay: 3.5s;
fill: #f5d5b0;
stroke: #333;
}
.kitten-paws {
animation-delay: 4s;
fill: #f5d5b0;
stroke: #333;
}
.kitten-tail {
animation-delay: 4.5s;
stroke: #333;
fill: none;
}
@keyframes draw {
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg viewBox="0 0 300 300">
<!-- Kitten Head -->
<path class="kitten-part kitten-head" d="M150,100 Q200,50 250,100 Q250,150 200,200 Q150,200 100,200 Q50,150 50,100 Q100,50 150,100 Z" />
<!-- Kitten Ears -->
<path class="kitten-part kitten-ears" d="M120,50 Q100,20 80,50 L100,80 Q110,60 120,80 Z" />
<path class="kitten-part kitten-ears" d="M180,50 Q200,20 220,50 L200,80 Q190,60 180,80 Z" />
<!-- Kitten Eyes -->
<circle class="kitten-part kitten-eyes" cx="120" cy="120" r="10" />
<circle class="kitten-part kitten-eyes" cx="180" cy="120" r="10" />
<!-- Kitten Pupils -->
<circle class="kitten-part kitten-pupils" cx="120" cy="120" r="5" />
<circle class="kitten-part kitten-pupils" cx="180" cy="120" r="5" />
<!-- Kitten Nose -->
<circle class="kitten-part kitten-nose" cx="150" cy="150" r="8" />
<!-- Kitten Mouth -->
<path class="kitten-part kitten-mouth" d="M150,160 Q160,180 150,190" />
<path class="kitten-part kitten-mouth" d="M150,190 Q140,180 150,160" />
<!-- Kitten Body -->
<ellipse class="kitten-part kitten-body" cx="150" cy="250" rx="80" ry="50" />
<!-- Kitten Paws -->
<circle class="kitten-part kitten-paws" cx="110" cy="280" r="15" />
<circle class="kitten-part kitten-paws" cx="190" cy="280" r="15" />
<circle class="kitten-part kitten-paws" cx="130" cy="300" r="12" />
<circle class="kitten-part kitten-paws" cx="170" cy="300" r="12" />
<!-- Kitten Tail -->
<path class="kitten-part kitten-tail" d="M230,250 Q280,200 250,150 Q220,200 200,250" />
</svg>
</body>
</html>
```
This code creates an SVG animation of a cute kitten by drawing each part of the kitten's body sequentially. The animation uses CSS animations to draw the SVG paths and shapes with a delay between each part to create a drawing effect. The kitten is composed of various SVG shapes such as paths, circles, and ellipses, each styled with CSS to create the final image.Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Cute Kitten SVG Animation</title>
<style>
body {
background-color: #f0f0f0;
}
#kitten {
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="kitten">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- Head -->
<ellipse cx="100" cy="50" rx="40" ry="30" fill="#fff" stroke="#000" stroke-width="2" />
<!-- Ears -->
<polygon points="60,40 80,20 100,40" fill="#fff" stroke="#000" stroke-width="2" />
<polygon points="140,40 120,20 100,40" fill="#fff" stroke="#000" stroke-width="2" />
<!-- Eyes -->
<circle cx="80" cy="60" r="10" fill="#000" />
<circle cx="120" cy="60" r="10" fill="#000" />
<!-- Nose -->
<circle cx="100" cy="80" r="5" fill="#000" />
<!-- Mouth -->
<path d="M 90,90 C 100,100 110,100 110,90" stroke="#000" stroke-width="2" fill="none" />
<!-- Body -->
<ellipse cx="100" cy="150" rx="50" ry="70" fill="#fff" stroke="#000" stroke-width="2" />
<!-- Legs -->
<rect x="60" y="170" width="20" height="30" fill="#fff" stroke="#000" stroke-width="2" rx="5" />
<rect x="120" y="170" width="20" height="30" fill="#fff" stroke="#000" stroke-width="2" rx="5" />
<!-- Tail -->
<path d="M 100,180 C 120,200 80,200 100,180" stroke="#000" stroke-width="2" fill="none" />
<!-- Animation -->
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="10s" repeatCount="indefinite" />
</svg>
</div>
</body>
</html>
```
This HTML and CSS code creates a cute kitten using SVG elements. The kitten is made up of basic shapes like ellipses, circles, polygons, and paths. The eyes, nose, and mouth are added to give the kitten a cute expression. The body, legs, and tail are also included to complete the kitten's appearance.
The animation is achieved using the `<animateTransform>` element, which rotates the kitten around its center point over a period of 10 seconds. The `repeatCount` attribute is set to "indefinite" to make the animation loop continuously.
Note that this code uses inline SVG, which allows you to embed SVG elements directly within your HTML document. The SVG elements are styled using CSS to add colors, borders, and other visual effects.Drag to resize
# Cute Kitten SVG Animation
I'll create a charming animated kitten with wagging tail, blinking eyes, and gentle ears that move. The design will be cute and appeal to all cat lovers!
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Kitten</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to bottom, #4ab0d9, #8bd3e0);
margin: 0;
font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
overflow: hidden;
}
.frame {
width: 90vw;
max-width: 600px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
position: relative;
overflow: hidden;
}
.frame::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent 60%);
z-index: -1;
border-radius: 25px;
}
.header {
text-align: center;
margin-bottom: 30px;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
}
h1 {
font-size: 36px;
margin: 10px 0;
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -5px;
left: 10%;
width: 80%;
height: 3px;
background: white;
border-radius: 2px;
transform: scaleX(0);
transform-origin: center;
animation: titleUnderline 2s ease-in-out infinite alternate;
}
.subtitle {
font-size: 18px;
opacity: 0.9;
}
@keyframes titleUnderline {
0% {
transform: scaleX(0);
}
50% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
.kitten-container {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto;
filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}
/* Animation Classes */
.tail {
animation: wag 3s ease-in-out infinite alternate;
transform-origin: 20% 80%;
}
.ear-left {
animation: leftEarTwitch 8s ease-in-out infinite;
}
.ear-right {
animation: rightEarTwitch 8s ease-in-out infinite;
animation-delay: 1s;
}
.eye-lid {
animation: blink 5s ease-in-out infinite;
}
.whisker-left, .whisker-right {
animation: float 4s ease-in-out infinite;
}
.whisker-right {
animation-delay: 0.5s;
}
/* Animation Keyframes */
@keyframes wag {
0%, 100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
@keyframes blink {
0%, 25%, 50%, 75%, 100% {
transform: translateY(0);
}
24%, 49%, 74%, 99% {
transform: translateY(8px);
}
}
@keyframes leftEarTwitch {
0%, 95% {
transform: translateY(2px) rotate(0deg);
}
96%, 97% {
transform: translateY(0) rotate(10deg);
}
98%, 99% {
transform: translateY(0) rotate(-5deg);
}
}
@keyframes rightEarTwitch {
0%, 93% {
transform: translateY(2px) rotate(0deg);
}
94%, 95% {
transform: translateY(0) rotate(-7deg);
}
96%, 97% {
transform: translateY(0) rotate(5deg);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(1deg);
}
50% {
transform: translateY(-3px) rotate(-1deg);
}
}
.description {
text-align: center;
margin-top: 30px;
color: white;
font-size: 16px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="frame">
<div class="header">
<h1>SVG Animated Kitten</h1>
<div class="subtitle">A cute, interactive SVG with playful animations</div>
</div>
<div class="kitten-container">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<!-- Head -->
<path d="M 170 110 Q 110 150 150 210 Q 170 250 250 250 Q 290 250 300 210 Q 340 150 280 110 Q 250 90 220 100 Z"
fill="#f4e4c5" stroke="#c0aa86" stroke-width="5" />
<!-- Ears -->
<path class="ear-left" d="M 180 110 Q 150 80 130 90 Q 100 100 120 130 Q 140 150 170 140 Z"
fill="#f4e4c5" stroke="#c0aa86" stroke-width="4"/>
<path class="ear-right" d="M 270 110 Q 300 80 320 90 Q 350 100 330 130 Q 310 150 280 140 Z"
fill="#f4e4c5" stroke="#c0aa86" stroke-width="4"/>
<!-- Body and Legs -->
<path d="M 200 250 Q 150 300 150 350 Q 180 380 200 350 Q 220 380 250 350 Q 260 300 250 280 Q 270 250 250 250 Q 230 250 200 250 Z"
fill="#f4e4c5" stroke="#c0aa86" stroke-width="6"/>
<!-- Tail -->
<path class="tail" d="M 250 280 Q 280 260 300 250 Q 320 230 330 220 Q 350 240 340 280 Q 330 320 300 300 Q 280 280 260 280 Z"
fill="#f4e4c5" stroke="#c0aa86" stroke-width="5"/>
<!-- Eyes -->
<g transform="translate(180, 180)">
<circle cx="-30" cy="-20" r="15" fill="#2c3e50"/>
<circle cx="60" cy="-20" r="15" fill="#2c3e50"/>
<circle cx="-25" cy="-15" r="4" fill="white"/>
<circle cx="55" cy="-15" r="4" fill="white"/>
<rect class="eye-lid" x="-45" y="-25" width="30" height="10" rx="5" fill="#f4e4c5"/>
<rect class="eye-lid" x="45" y="-25" width="30" height="10" rx="5" fill="#f4e4c5"/>
</g>
<!-- Nose -->
<path d="M 200 220 Q 210 230 220 220 Q 210 -5 200 220 Z" fill="#ff9f9f"/>
<!-- Mouth -->
<path d="M 210 230 Q 210 250 220 250" fill="none" stroke="#2c3e50" stroke-width="2"/>
<!-- Left whiskers -->
<path class="whisker-left" d="M 180 220 Q 150 200 140 210" stroke="#2c3e50" stroke-width="1.5" opacity="0.7"/>
<path class="whisker-left" d="M 180 225 Q 140 220 130 230" stroke="#2c3e50" stroke-width="1.5" opacity="0.7"/>
<path class="whisker-left" d="M 180 230 Q 145 235 135 245" stroke="#2c3e50" stroke-width="1.5" opacity="0.7"/>
<!-- Right whiskers -->
<path class="whisker-right" d="M 240 220 Q 270 200 280 210" stroke="#2c3e50" stroke-width="1.5" opacity="0.7"/>
<path class="whisker-right" d="M 240 225 Q 280 220 290 230" stroke="#2c3e50" stroke-width="1.5" opacity="0.7"/>
<path class="whisker-right" d="M 240 230 Q 275 235 285 245" stroke="#2c3e50" stroke-width="1.5" opacity="0.7"/>
</svg>
</div>
<div class="description">
This SVG kitten features a wagging tail, blinking eyes, twitching ears, and floating whiskers.
Everything is created with pure HTML, CSS, and SVG—no JavaScript required!
</div>
</div>
</body>
</html>
```
## Features
- A fluffy, cream-colored kitten created entirely with SVG paths and shapes
- Smooth CSS animations including:
- Wagging tail
- Blinking eyes
- Independent ear twitching
- Floating whiskers
- Soft pastel background gradient
- Frosted glass container with subtle shadow effects
- Responsive design that works on any device
The kitten has a playful expression with its tail wagging casually and ears twitching independently. The eyes blink gently, and the whiskers seem to float as if the kitten is breathing.
Simply copy the entire code and run it in any modern browser to see the animation!Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Kitten Drawing Animation</title>
<style>
/* General reset for the SVG strokes */
svg *{
vector-effect: non-scaling-stroke;
}
/* Drawing animation */
@keyframes draw {
to { stroke-dashoffset: 0; }
}
/* Blink animation for the eyes */
@keyframes blink {
0%, 92%, 100% { transform: scaleY(1); }
96% { transform: scaleY(0.1); }
}
/* ---------- Stroke-only “pencil” lines ---------- */
.line {
fill: none;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 6s linear forwards;
}
/* Delay successive pieces so the kitten is drawn one part after another */
#body { animation-delay: 0s; }
#tail { animation-delay: 0.3s;}
#head { animation-delay: 0.8s;}
#earL { animation-delay: 1.1s;}
#earR { animation-delay: 1.1s;}
#nose { animation-delay: 1.6s;}
#mouth { animation-delay: 1.7s;}
.whisker { animation-delay: 1.9s;}
/* ---------- Filled shapes that appear after lines finish ---------- */
.fill {
stroke: none;
fill: #F9DDBF; /* Soft kitty color */
opacity: 0;
animation: showFill 0.5s ease forwards;
animation-delay: 2.5s;
}
.inner-fill {
stroke: none;
fill: #F4C9A9; /* Inside ear / nose pink */
opacity: 0;
animation: showFill 0.5s ease forwards;
animation-delay: 2.6s;
}
@keyframes showFill {
to { opacity: 1; }
}
/* ---------- Eyes ---------- */
.eye {
fill: #000;
animation: blink 4s infinite ease-in-out 2.8s; /* start after kitten appears */
transform-origin: center;
transform-box: fill-box;
}
</style>
</head>
<body>
<svg viewBox="0 0 300 300" width="300" height="300" aria-label="Drawing of a cute kitten">
<!-- Body -->
<ellipse id="body" class="line" cx="150" cy="205" rx="70" ry="55"></ellipse>
<ellipse class="fill" cx="150" cy="205" rx="70" ry="55"></ellipse>
<!-- Tail -->
<path id="tail" class="line" d="M220 200 Q260 180 240 140 Q230 120 200 135" ></path>
<path class="fill" d="M220 200 Q260 180 240 140 Q230 120 200 135 L198 140 Q225 125 235 145 Q255 180 215 205 Z"></path>
<!-- Head -->
<circle id="head" class="line" cx="150" cy="110" r="50"></circle>
<circle class="fill" cx="150" cy="110" r="50"></circle>
<!-- Ears (stroke) -->
<path id="earL" class="line" d="M115 65 L135 20 L155 65 Z"></path>
<path id="earR" class="line" d="M185 65 L205 20 L225 65 Z"></path>
<!-- Ears (inner pink fill) -->
<path class="inner-fill" d="M125 60 L135 33 L145 60 Z"></path>
<path class="inner-fill" d="M195 60 L205 33 L215 60 Z"></path>
<!-- Eyes -->
<circle class="eye" cx="135" cy="105" r="6"></circle>
<circle class="eye" cx="165" cy="105" r="6"></circle>
<!-- Nose -->
<path id="nose" class="line" d="M150 120 L143 128 L157 128 Z"></path>
<path class="inner-fill" d="M150 122 L146 127 L154 127 Z"></path>
<!-- Mouth -->
<path id="mouth" class="line" d="M143 132 Q150 138 157 132"></path>
<!-- Whiskers -->
<path class="line whisker" d="M110 115 H140"></path>
<path class="line whisker" d="M110 125 H140"></path>
<path class="line whisker" d="M110 135 H140"></path>
<path class="line whisker" d="M160 115 H190"></path>
<path class="line whisker" d="M160 125 H190"></path>
<path class="line whisker" d="M160 135 H190"></path>
</svg>
</body>
</html>
```Drag to resize
Here's a complete HTML file with an SVG animation that draws a cute kitten using HTML and CSS. The animation will gradually draw the kitten's outline and features.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Kitten SVG Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
svg {
width: 300px;
height: 300px;
}
.draw {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 5s ease-in-out forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.fill {
animation: fill 1s ease-in-out 5s forwards;
opacity: 0;
}
@keyframes fill {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- Kitten Head Outline -->
<path d="M100,50 C130,50 150,80 150,100 C150,120 130,140 100,140 C70,140 50,120 50,100 C50,80 70,50 100,50 Z"
fill="none" stroke="#333" stroke-width="3" class="draw"/>
<!-- Kitten Ears -->
<path d="M60,30 L40,60 L80,60 Z" fill="none" stroke="#333" stroke-width="3" class="draw"/>
<path d="M140,30 L160,60 L120,60 Z" fill="none" stroke="#333" stroke-width="3" class="draw"/>
<!-- Ear Fills -->
<path d="M60,40 L45,60 L75,60 Z" fill="#ffcccc" class="fill"/>
<path d="M140,40 L155,60 L125,60 Z" fill="#ffcccc" class="fill"/>
<!-- Eyes -->
<circle cx="80" cy="90" r="10" fill="none" stroke="#333" stroke-width="2" class="draw"/>
<circle cx="120" cy="90" r="10" fill="none" stroke="#333" stroke-width="2" class="draw"/>
<circle cx="80" cy="90" r="5" fill="#339af0" class="fill"/>
<circle cx="120" cy="90" r="5" fill="#339af0" class="fill"/>
<!-- Nose -->
<path d="M100,110 L95,100 L105,100 Z" fill="#ff6666" class="fill"/>
<!-- Whiskers -->
<line x1="70" y1="105" x2="50" y2="100" stroke="#333" stroke-width="1" class="draw"/>
<line x1="70" y1="110" x2="50" y2="110" stroke="#333" stroke-width="1" class="draw"/>
<line x1="70" y1="115" x2="50" y2="120" stroke="#333" stroke-width="1" class="draw"/>
<line x1="130" y1="105" x2="150" y2="100" stroke="#333" stroke-width="1" class="draw"/>
<line x1="130" y1="110" x2="150" y2="110" stroke="#333" stroke-width="1" class="draw"/>
<line x1="130" y1="115" x2="150" y2="120" stroke="#333" stroke-width="1" class="draw"/>
<!-- Mouth -->
<path d="M95,115 C97,120 103,120 105,115" fill="none" stroke="#333" stroke-width="1" class="draw"/>
</svg>
</body>
</html>
```
This code creates an SVG animation of a cute kitten being drawn line by line. The kitten includes a round head, pointy ears with pink insides, blue eyes, a triangular nose, whiskers, and a smiling mouth. The drawing animation lasts 5 seconds, after which the fill colors for the ears, eyes, and nose fade in. Everything is contained in a single HTML file with embedded CSS, requiring no external libraries.Drag to resize
Of course! Here is a self-contained HTML file that uses SVG and CSS to draw an animation of a cute kitten. The animation first draws the outline of the kitten, then its facial features, and finally fills it with color and makes it blink.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drawing a Cute Kitten</title>
<style>
/* Basic page styling to center the kitten */
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
background-color: #f0f8ff; /* AliceBlue */
}
/* Style the SVG container */
.kitten-container {
width: 90%;
max-width: 500px;
}
/* The core of the drawing animation relies on stroke-dasharray and stroke-dashoffset.
- stroke-dasharray: Creates a pattern of dashes. By setting it to the path's total length, we create one giant dash.
- stroke-dashoffset: Pushes the start of the dash pattern along the path. By setting it equal to the dasharray value, the dash is pushed completely off the path, making it invisible.
- Animation: We animate the stroke-dashoffset from its full value down to 0, which "draws" the line onto the screen.
*/
/* Default styles for all paths */
.kitten-svg path {
stroke: #333; /* Dark grey outline */
stroke-width: 8;
stroke-linecap: round;
stroke-linejoin: round;
fill: transparent; /* Start with no fill */
}
/* Main body outline */
#cat-outline {
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
animation:
draw 3s ease-in-out forwards,
fill-in 1s ease-in forwards 3.5s;
}
/* Tail outline */
#cat-tail {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: draw 2s ease-in-out forwards 2s;
}
/* Facial Features */
#face-details path {
stroke-width: 6;
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: draw 1.5s ease-out forwards 3s;
}
#nose {
/* Make the nose pink after it's drawn */
animation:
draw 1.5s ease-out forwards 3s,
fill-nose 0.5s ease-in forwards 4s;
}
/* Eye styling and blinking animation */
#left-eye, #right-eye {
/* Set the origin for scaling transformations (blinking) */
transform-origin: center;
/* The eyes fill with black after being drawn */
animation:
draw 1s ease-out forwards 3.2s,
fill-eyes 0.5s linear forwards 4.2s,
blink 5s ease-in-out infinite 5s;
}
/* --- KEYFRAME ANIMATIONS --- */
/* The main drawing animation */
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
/* Animation to fill the main body with color */
@keyframes fill-in {
to {
fill: #dcdcdc; /* Light Grey */
}
}
/* Animation to fill the nose with color */
@keyframes fill-nose {
to {
fill: #ffb6c1; /* Light Pink */
stroke: #e06c7d;
}
}
/* Animation to fill the eyes with color */
@keyframes fill-eyes {
to {
fill: #333; /* Dark Grey */
}
}
/* Blinking animation for the eyes */
@keyframes blink {
0%, 90%, 100% {
transform: scaleY(1);
}
95% {
transform: scaleY(0.1);
}
}
</style>
</head>
<body>
<div class="kitten-container">
<svg class="kitten-svg" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<!-- Tail -->
<path id="cat-tail" d="M 290 230 Q 350 250 330 320" />
<!-- Main Body and Head Outline -->
<path id="cat-outline" d="M 110 230
C 100 150, 120 80, 200 80
S 300 150, 290 230
C 320 280, 280 340, 200 340
S 80 280, 110 230 Z" />
<!-- Facial Features Group -->
<g id="face-details">
<!-- Eyes -->
<path id="left-eye" d="M 160 180 a 15 18 0 1 0 0.1 0 Z" />
<path id="right-eye" d="M 240 180 a 15 18 0 1 0 0.1 0 Z" />
<!-- Nose and Mouth -->
<path id="nose" d="M 200 210 l -10 10 h 20 Z" />
<path id="mouth" d="M 180 230 Q 200 245 220 230" />
<!-- Whiskers -->
<path id="whisker-left-1" d="M 140 210 l -40 0" />
<path id="whisker-left-2" d="M 145 220 l -40 5" />
<path id="whisker-left-3" d="M 145 230 l -40 10" />
<path id="whisker-right-1" d="M 260 210 l 40 0" />
<path id="whisker-right-2" d="M 255 220 l 40 5" />
<path id="whisker-right-3" d="M 255 230 l 40 10" />
</g>
</svg>
</div>
</body>
</html>
```Drag to resize
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
<style>
.draw {
stroke: #333;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 3s ease-in-out forwards;
}
.draw:nth-child(1) { animation-delay: 0.2s; }
.draw:nth-child(2) { animation-delay: 0.6s; }
.draw:nth-child(3) { animation-delay: 1s; }
.draw:nth-child(4) { animation-delay: 1.4s; }
.draw:nth-child(5) { animation-delay: 1.8s; }
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.pupil {
fill: #222;
animation: blink 4s infinite;
}
@keyframes blink {
0%, 95%, 100% { transform: scaleY(1); }
90%, 10% { transform: scaleY(0.1); }
}
.whiskers {
stroke: #333;
stroke-width: 1;
opacity: 0.7;
animation: appear 1s ease-in-out 3s forwards;
}
@keyframes appear {
from { opacity: 0; transform: scale(0); }
to { opacity: 0.7; transform: scale(1); }
}
.tail {
animation: sway 2s ease-in-out infinite alternate;
}
@keyframes sway {
from { transform: rotate(-10deg); }
to { transform: rotate(10deg); }
}
.sparkle {
fill: white;
opacity: 0.8;
animation: sparkle 1s ease-in-out infinite;
}
@keyframes sparkle {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.5); opacity: 0; }
}
</style>
<!-- Body Outline -->
<path class="draw" d="M100,150 C80,170 70,130 70,120 C70,90 130,80 130,120 C130,150 110,160 100,150"/>
<!-- Ears -->
<path class="draw" d="M85,55 C80,45 75,50 75,60 C75,80 100,80 100,55"/>
<path class="draw" d="M115,55 C120,45 125,50 125,60 C125,80 100,80 100,55"/>
<!-- Head -->
<path class="draw" d="M100,55 C120,60 130,90 120,95 C110,100 90,100 80,95 C70,90 80,60 100,55"/>
<!-- Nose -->
<path class="draw" d="M100,85 L95,95 L105,95 Z"/>
<!-- Eyes -->
<path d="M85,75 C85,70 100,70 100,75" fill="none" stroke="#333" stroke-width="2"/>
<path d="M100,75 C100,70 115,70 115,75" fill="none" stroke="#333" stroke-width="2"/>
<circle class="pupil" cx="92" cy="78" r="3"/>
<circle class="pupil" cx="108" cy="78" r="3"/>
<circle class="sparkle" cx="90" cy="75" r="1"/>
<circle class="sparkle" cx="106" cy="75" r="1"/>
<!-- Tail -->
<path class="draw tail" d="M70,130 Q40,160 60,180 Q80,200 100,170" transform="rotate(-20 70 130)"/>
<!-- Whiskers -->
<path class="whiskers" d="M85,95 Q75,97 65,105"/>
<path class="whiskers" d="M115,95 Q125,97 135,105"/>
</svg>Drag to resize
Certainly! Below is an example of an SVG animation depicting a cute kitten, embedded within HTML and CSS:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kitten Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f8ff;
}
.kitten-container {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="kitten-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200,200,200);stop-opacity:1" />
</linearGradient>
</defs>
<g>
<circle cx="100" cy="100" r="80" fill="url(#grad1)" stroke="black" stroke-width="2"/>
<circle cx="120" cy="90" r="10" fill="black"/>
<circle cx="80" cy="90" r="10" fill="black"/>
<path d="M100,120 Q110,130 100,140 Q90,130 100,120" fill="none" stroke="black" stroke-width="2"/>
<polygon points="100,150 90,160 110,160" fill="pink"/>
</g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" dur="10s" repeatCount="indefinite"/>
</svg>
</div>
</body>
</html>
```
This HTML document contains an SVG drawing of a kitten inside a div. The kitten is a simple design with a gradient-filled circle for the body, two smaller circles for the eyes, a path for the mouth, and a triangle for the nose. The kitten rotates continuously thanks to the `<animateTransform>` element. This creates a fun and dynamic animation suitable for a webpage.Drag to resize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kitten SVG Animation</title>
<style>
body {
background: #e0f7fa;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
svg {
width: 400px;
height: 400px;
}
path, circle, line {
fill: none;
stroke: #333;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Outline drawing */
.draw {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 1s forwards ease-in-out;
}
/* Whiskers draw quicker */
.whisker {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: draw 0.5s forwards ease-in-out;
}
/* Eyes fade in */
.eye {
fill: #333;
opacity: 0;
animation: fadeIn 0.5s forwards ease-in-out;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
to { opacity: 1; }
}
</style>
</head>
<body>
<svg viewBox="0 0 200 200">
<!-- Head -->
<path class="draw" style="animation-delay:0s"
d="M50,80 Q50,30 100,30 Q150,30 150,80 Q150,130 100,170 Q50,130 50,80 Z"/>
<!-- Left Ear -->
<path class="draw" style="animation-delay:0.5s"
d="M60,80 L40,40 L80,60 Z"/>
<!-- Right Ear -->
<path class="draw" style="animation-delay:1s"
d="M140,80 L160,40 L120,60 Z"/>
<!-- Body -->
<path class="draw" style="animation-delay:1.5s"
d="M60,140 Q50,200 100,200 Q150,200 140,140 Z"/>
<!-- Tail -->
<path class="draw" style="animation-delay:2s"
d="M140,140 C180,120 180,180 140,160"/>
<!-- Whiskers Left -->
<line class="whisker" style="animation-delay:2.5s" x1="70" y1="100" x2="20" y2="95"/>
<line class="whisker" style="animation-delay:2.7s" x1="70" y1="110" x2="20" y2="110"/>
<line class="whisker" style="animation-delay:2.9s" x1="70" y1="120" x2="20" y2="125"/>
<!-- Whiskers Right -->
<line class="whisker" style="animation-delay:2.5s" x1="130" y1="100" x2="180" y2="95"/>
<line class="whisker" style="animation-delay:2.7s" x1="130" y1="110" x2="180" y2="110"/>
<line class="whisker" style="animation-delay:2.9s" x1="130" y1="120" x2="180" y2="125"/>
<!-- Eyes -->
<circle class="eye" style="animation-delay:3.2s" cx="80" cy="90" r="5"/>
<circle class="eye" style="animation-delay:3.2s" cx="120" cy="90" r="5"/>
</svg>
</body>
</html>Drag to resize
To create a simple SVG animation of a cute kitten, we'll break down the task into creating the kitten using basic SVG shapes and then animating it. We'll use HTML for structure, SVG for the drawing, and CSS for styling and animation.
Below is a simple example of a kitten drawn using SVG and animated using CSS. This kitten will be made up of basic shapes like circles, ellipses, and lines. The animation will be a simple blinking effect.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Kitten SVG Animation</title>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.kitten-eyes {
animation: blink 4s infinite;
}
@keyframes blink {
0%, 90%, 100% {
transform: scaleY(1);
}
95% {
transform: scaleY(0.1);
}
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Face -->
<circle cx="100" cy="100" r="80" fill="#FFC0CB"/>
<!-- Ears -->
<ellipse cx="60" cy="40" rx="20" ry="30" fill="#FFC0CB" stroke="#FF99AC" stroke-width="2"/>
<ellipse cx="140" cy="40" rx="20" ry="30" fill="#FFC0CB" stroke="#FF99AC" stroke-width="2"/>
<!-- Eyes -->
<g class="kitten-eyes">
<circle cx="70" cy="90" r="15" fill="#000"/>
<circle cx="130" cy="90" r="15" fill="#000"/>
</g>
<!-- Nose -->
<circle cx="100" cy="120" r="8" fill="#FF69B4"/>
<!-- Whiskers -->
<line x1="80" y1="110" x2="60" y2="110" stroke="#000" stroke-width="2"/>
<line x1="120" y1="110" x2="140" y2="110" stroke="#000" stroke-width="2"/>
<line x1="80" y1="100" x2="50" y2="90" stroke="#000" stroke-width="1"/>
<line x1="120" y1="100" x2="150" y2="90" stroke="#000" stroke-width="1"/>
</svg>
</body>
</html>
```
In this code:
1. We create a basic SVG structure with a `viewBox` that makes it easy to position our kitten's features.
2. The kitten is drawn using SVG elements: a circle for the face, ellipses for the ears, circles for the eyes and nose, and lines for the whiskers.
3. The eyes are grouped with the class `kitten-eyes` so we can animate them together.
4. CSS is used to animate the eyes, creating a blinking effect by scaling the `kitten-eyes` group along the Y-axis.
This is a very basic representation and can be expanded with more complex shapes and animations. You can customize the SVG and CSS to create different looks and effects.Drag to resize