<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>Golden Retriever with Bark-ID (Wagging Tail)</title>
<style>
:root{
–golden:#D9A441; /* coat color */
–golden-shade:#C28E37;
–nose:#2b2b2b;
–eye:#1a1a1a;
–patch:#111; /* Bark-ID patch background */
–patch-text:#fff; /* Bark-ID patch text */
–harness:#1e90ff; /* bandana/harness color */
–bg:#fff;
}
body{
margin:0; display:grid; place-items:center; min-height:100vh; background:var(–bg);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.dog-wrap{
width:min(520px, 92vw);
aspect-ratio: 5 / 3;
}
/* Tail wag animation */
.tail {
transform-origin: 365px 120px; /* pivot at tail base */
animation: wag 0.9s ease-in-out infinite;
}
@keyframes wag {
0% { transform: rotate(18deg); }
50% { transform: rotate(-18deg); }
100% { transform: rotate(18deg); }
}
/* Gentle bob for playful vibe (optional) */
.dog { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob {
0%,100% { transform: translateY(0px); }
50% { transform: translateY(-2px); }
}
/* Crisp edges on retina */
svg { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
</style>
</head>
<body>
<svg class=”dog-wrap” viewBox=”0 0 520 312″ role=”img” aria-labelledby=”title desc”>
<title id=”title”>Golden retriever with a Bark-ID patch wagging its tail</title>
<desc id=”desc”>A simple illustrated golden retriever standing in profile, wearing a small Bark-ID patch; the tail gently wags.</desc>
<!– Shadow –>
<ellipse cx=”240″ cy=”265″ rx=”190″ ry=”18″ fill=”#000″ opacity=”0.08″></ellipse>
<!– Group all dog parts for easy transforms –>
<g class=”dog”>
<!– Body –>
<path d=”M95 155
C110 120, 165 105, 230 112
C300 118, 330 140, 360 165
C385 186, 390 210, 380 230
C370 248, 350 258, 315 260
L175 260
C135 258, 110 250, 102 230
C92 205, 85 175, 95 155Z”
fill=”url(#coatGrad)” stroke=”var(–golden-shade)” stroke-width=”2″/>
<!– Chest fluff –>
<path d=”M120 175 C125 188, 135 200, 140 212 C132 205, 125 198, 118 190 Z”
fill=”var(–golden)” opacity=”0.8″/>
<!– Back Leg –>
<path d=”M300 206 C318 205, 330 214, 336 230 C340 242, 338 255, 330 260 L300 260 Z”
fill=”var(–golden-shade)”/>
<!– Front Leg –>
<path d=”M170 210 C180 212, 190 225, 192 238 C194 252, 188 260, 180 260 L160 260 C155 250, 156 232, 160 220 Z”
fill=”var(–golden-shade)”/>
<!– Head –>
<g transform=”translate(70,80)”>
<!– Head shape –>
<path d=”M0 55
C10 25, 45 10, 82 18
C108 23, 132 40, 134 62
C136 82, 118 97, 100 102
C85 106, 72 106, 60 102
C42 96, 26 86, 18 72
C10 60, -2 75, 0 55Z”
fill=”var(–golden)” stroke=”var(–golden-shade)” stroke-width=”2″/>
<!– Ear –>
<path d=”M62 22 C40 35, 28 60, 36 85 C58 80, 70 60, 76 42 Z”
fill=”var(–golden-shade)”/>
<!– Snout –>
<path d=”M108 72 C128 66, 150 72, 160 82 C150 86, 130 90, 112 86 Z”
fill=”var(–golden)” stroke=”var(–golden-shade)” stroke-width=”1.5″/>
<!– Nose –>
<ellipse cx=”162″ cy=”82″ rx=”7″ ry=”5″ fill=”var(–nose)”/>
<!– Eye –>
<circle cx=”105″ cy=”55″ r=”4.3″ fill=”var(–eye)”/>
<!– Smile –>
<path d=”M120 90 Q128 100 142 94″ fill=”none” stroke=”#3a2a12″ stroke-width=”2″ stroke-linecap=”round”/>
</g>
<!– Tail (animated) –>
<g class=”tail”>
<path d=”M360 165
C380 150, 400 140, 420 142
C440 144, 450 158, 452 170
C430 168, 410 170, 390 182
C378 189, 368 194, 360 195 Z”
fill=”var(–golden)” stroke=”var(–golden-shade)” stroke-width=”2″/>
</g>
<!– Harness/Bandana strap –>
<path d=”M170 170 L230 135 L255 150 L195 185 Z” fill=”var(–harness)” opacity=”0.9″/>
<!– Bark-ID patch –>
<g transform=”translate(205,155) rotate(-24)”>
<rect x=”-26″ y=”-14″ rx=”4″ ry=”4″ width=”72″ height=”28″
fill=”var(–patch)” stroke=”#444″ stroke-width=”1″/>
<text x=”10″ y=”5″ font-size=”12″ font-weight=”700″ text-anchor=”middle”
font-family=”ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial”
fill=”var(–patch-text)”>BARK-ID</text>
</g>
</g>
<!– Coat gradient –>
<defs>
<linearGradient id=”coatGrad” x1=”0%” y1=”0%” x2=”0%” y2=”100%”>
<stop offset=”0%” stop-color=”var(–golden)”/>
<stop offset=”100%” stop-color=”var(–golden-shade)”/>
</linearGradient>
</defs>
</svg>
</body>
</html>