⌘K
Open Mighty Back to Agents
✦
What can you do with this Agent?▾
Generates a static SVG and an animated SVG of a pelican riding a bicycle, ready for web use and customization.
Agent Demo
✦
Hi — I create clean, inline-ready SVGs of a pelican riding a bicycle: first a simple static SVG, then a looping animated SVG with pedaling and bobbing. Tell me desired size, colors, and animation style and I'll produce editable code you can drop into your site.
Y
Create a simple static SVG of a pelican riding a bicycle sized 300x200, with neutral colors and clear shapes for easy editing.
✦
Here's a compact static SVG you can paste inline into your HTML. It uses simple shapes for easy editing:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" width="300" height="200">
<title>Pelican on a bicycle (static)</title>
<desc>Simple illustration: pelican above a bicycle with two wheels.</desc>
<!-- Wheels -->
<circle cx="70" cy="160" r="28" fill="#333" />
<circle cx="230" cy="160" r="28" fill="#333" />
<!-- Frame -->
<line x1="70" y1="160" x2="140" y2="120" stroke="#444" stroke-width="4" />
<line x1="140" y1="120" x2="230" y2="160" stroke="#444" stroke-width="4" />
<!-- Pelican body -->
<ellipse cx="145" cy="80" rx="38" ry="28" fill="#fff" stroke="#222" />
<path d="M160 72 q18 -6 28 6 q-6 12 -28 6" fill="#ffd" stroke="#222" />
</svg>
Y
Now provide an animated version that gently pedals the wheels and makes the pelican bob up and down, looping smoothly.
✦
Below is an animated SVG using animateTransform for wheel rotation and a translate animation for a gentle bob. It loops indefinitely and is inline-ready:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" width="300" height="200">
<title>Pelican on a bicycle (animated)</title>
<desc>Wheels rotate and the pelican bobs up and down; looped animation for web.</desc>
<!-- Left wheel -->
<g>
<circle cx="70" cy="160" r="28" fill="#333" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 70 160" to="360 70 160" dur="1s" repeatCount="indefinite" />
</g>
<!-- Right wheel -->
<g>
<circle cx="230" cy="160" r="28" fill="#333" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 230 160" to="360 230 160" dur="1s" repeatCount="indefinite" />
</g>
<!-- Bicycle frame (static) -->
<line x1="70" y1="160" x2="140" y2="120" stroke="#444" stroke-width="4" />
<line x1="140" y1="120" x2="230" y2="160" stroke="#444" stroke-width="4" />
<!-- Pelican group with bobbing animation -->
<g>
<g id="pelican">
<ellipse cx="145" cy="80" rx="38" ry="28" fill="#fff" stroke="#222" />
<path d="M160 72 q18 -6 28 6 q-6 12 -28 6" fill="#ffd" stroke="#222" />
</g>
<animateTransform xlink:href="#pelican" attributeName="transform" attributeType="XML" type="translate" values="0 0;0 -6;0 0" dur="2s" repeatCount="indefinite" />
</g>
</svg>
Notes: change dur values to slow/speed up animation, edit fill/stroke colors directly, or swap animateTransform for CSS animations if you prefer external styles.
Do you want a flat/simplified or more detailed pelican illustration?What size (width × height) and color palette should I use?Prefer SVG-native animations (<animateTransform>) or CSS-based animations?Should the animation loop indefinitely, play once, or respond to hover/click?