Skip to content

Instantly share code, notes, and snippets.

@SerJaimeLannister
Created February 19, 2026 17:16
Show Gist options
  • Select an option

  • Save SerJaimeLannister/0d91539f868ccbc88a57455d2721e602 to your computer and use it in GitHub Desktop.

Select an option

Save SerJaimeLannister/0d91539f868ccbc88a57455d2721e602 to your computer and use it in GitHub Desktop.
ampharos-svg-gemini
**Defining the Subject**
I've zeroed in on the core of the request: an Ampharos on a bicycle, strictly in SVG format. The parameters are clear; it's a direct SVG design task. I'm focusing on capturing Ampharos's form dynamically interacting with the bike, envisioning how best to render the Pokémon accurately.
**Structuring the Elements**
I'm structuring the SVG now, focusing on the Ampharos and bicycle components. I'm placing the pokemon astride the bike, considering the bipedal nature of the Pokemon to create a believable posture. I'm making sure all the features, from the orbs to the stripes, are included. Currently working on the shadow to give the image a better sense of depth. I'm making sure all the code will be valid SVG.
**Layering the Design**
I'm now focusing on layering the SVG elements. The bicycle's back components, like the rear wheel and part of the frame, are going down first. Next, I'll integrate the Ampharos, paying attention to arm and leg positions relative to the bike, and its tail extending behind the frame. Finally, I'll layer the bicycle's front elements, handlebars, and front wheel, to complete the composite image.
**Detailing the Geometry**
I'm now detailing the precise geometry. I'm focusing on crafting the bicycle's front wheel, seat (considering both `ellipse` and `path` options), and handlebars using `path` elements. For Ampharos, I'm working through each body part, placing the tail with its black/yellow segments and red orb, and then placing the torso with the seat and creating the belly, legs, and arms, with their correct positions relative to the bicycle's components.
**Constructing the Components**
I'm now integrating detailed ear shapes for Ampharos, positioning them accurately. I've also implemented the wheel base, adding spokes. I've begun to create the bike frame using paths, setting the stroke color. I'm focusing on the frame geometry now, striving for a visually appealing red bicycle design, integrating paths for a cohesive structure.
**Refining the Tail**
I'm now refining the Ampharos tail, aiming for accurate proportions and a dynamic curve. I've scrapped the clip-path idea and decided to overlay the black segments directly onto the yellow tail, which seems simpler. I'm focusing on the black rings and the tail's curvature, particularly the orb at the end. I'm making sure it's visually appealing. I've updated the tail path to better represent the curve. I'm now testing the placement of the black rings.
```xml
```
**Shaping the Torso**
I'm now focusing on crafting Ampharos's torso, specifically the curves of its plump bottom and slender neck. I've adjusted the coordinates for the belly, back, and neck, and the seat is now at (350, 310). I'm refining the path elements for a smoother transition from the bottom curve to the neck. I'm carefully constructing the head's circular shape, adjusting the coordinates for the snout. I'm using an XML path now. I've composed the shapes, plotting the curve from (310, 320) to (400, 340).
**Simplifying the Design**
I'm now focusing on a flat vector style to avoid potential seams and simplify the SVG. I've decided to create the character without outlines for a cleaner look. I'm experimenting with overlapping simple shapes and paths, like ellipses for the head and torso. I'm considering using a unified fill color, while retaining the basic shapes with the correct geometric specifications.
```xml
<ellipse cx="460" cy="180" rx="40" ry="35"/>
<path d="M 460 145 C 510 145 520 180 500 200 C 480 210 460 215 460 215 Z"/>
<ellipse cx="370" cy="330" rx="50" ry="60" transform="rotate(-15 370 330)"/>
<path d="M 360 280 Q 430 250 450 200 L 410 180 Q 380 230 330 280 Z" fill="#FFCC00"/>
```
**Refining the Tail Stripes**
I've returned to the Ampharos tail, now employing a clever `stroke-dasharray` technique. I'm duplicating the base yellow tail path and applying a dash array to generate the black stripes. I'm aiming for clean, even stripes with this method, sidestepping the complexity of clipping paths or precise overlapping polygons. I'm currently testing the stripe spacing and sizing to get a visual just right.
**Adjusting Path Elements**
I'm now integrating the updated path lengths and `stroke-dasharray` for the tail; the dash array now accurately represents black stripes over the yellow base. I've switched the style to a flat vector, setting the `stroke-width` to 28 for the tail. I've added a red orb, `<circle cx="120" cy="240" r="24" fill="#E32636"/>`. I'm also now adjusting coordinates and curves to refine the torso, and constructing the head path element, adjusting for the forward lean on the bicycle.
```xml
<path d="M 330 360 C 330 420, 420 420, 420 360 C 420 280, 460 230, 460 200 C 460 160, 420 160, 420 200 C 420 230, 360 280, 330 360 Z" fill="#FFCC00"/>
```
**Refining the Body**
I'm now refining Ampharos' body, focusing on its contours. I'm carefully adjusting the coordinates of the belly and back paths, as well as the neck and snout. My focus is on achieving a smooth transition from the bottom to the neck, using curves to create a more natural silhouette. I'm aiming for a stylized look for the pokemon.
**Adding Head Details**
I'm now detailing the Ampharos head, and I've added the red orb and eye. I'm focusing on the ears now, giving them a geometric design. I'm placing the rear and front ears, and the rear ear has black and yellow stripes.
```xml
<ellipse cx="485" cy="135" rx="10" ry="14" transform="rotate(20 485 135)" fill="#E32636"/>
<circle cx="465" cy="145" r="3" fill="#222"/>
<path d="M 440 150 L 380 120 L 420 170 Z" fill="#FFCC00"/>
<path d="M 440 150 L 380 120 L 420 170 Z" fill="#222" style="stroke-width: 2px; stroke: #000;"/>
```
**Implementing Ear Stripes**
I'm now implementing the black stripes on Ampharos's ears, and I've adopted a `clipPath` for clean and controlled stripes. I'm testing the placement and dimensions with some rectangles, experimenting with their placement inside the clipped path. It's a much more efficient approach. I'm aiming for visually appealing and clean stripes using this new technique.
```xml
<clipPath id="nearEarClip">
<polygon points="450,140 380,110 435,170" />
</clipPath>
<g clip-path="url(#nearEarClip)">
<polygon points="450,140 380,110 435,170" fill="#FFCC00" />
<!-- Black Stripes -->
<rect x="420" y="100" width="12" height="80" transform="rotate(30 420 100)" fill="#222" />
<rect x="390" y="100" width="12" height="80" transform="rotate(30 390 100)" fill="#222" />
</g>
```
**Streamlining the Geometry**
I'm now streamlining the geometric approach for the ear stripes, and have decided against rotated rectangles and instead am now using lines within the `clipPath`. This simplifies the stripe generation, and produces the desired appearance. I'm focusing on crafting and refining the path for clean stripes. My aim is to make the design as efficient as possible.
**Refining the Arm**
I'm now refining the Ampharos front arm, and I'm working out the curve to interact with the handlebar. I've adjusted the handlebar position based on the Pokemon's proportions and it's looking much more natural, making sure the arm is touching the handlebar. I'm focusing on the handlebar location, and adjusting the curves for a realistic interaction. I've re-positioned the handlebar for a better fit.
**Adjusting Arm and Leg Placement**
I'm now integrating the arm and leg placements, specifically the back (left) arm reaching the handlebar and the legs interacting with the pedals. I'm focusing on the curve of the back arm and adjusting the handlebar for a natural grip. The right leg's path now extends to the pedal. I'm focusing on the leg path for a clean, stylized, look, and including the black claw for the right leg. The far leg is now behind the frame with its pedal.
**Defining the Color Scheme**
I've established the bike's color palette, focusing on a visually harmonious balance. I'm assigning Dark Slate to tires, Silver for rims, and Blue for the frame. The seat is Dark Blue/Gray, handlebars are Grey, and the chain/gears are a darker Grey. I'm now transitioning to the precise frame geometry, and then building the drawing commands in SVG.
**Constructing the Bicycle**
I'm now building the bicycle frame and chain details. I've added a diamond frame, with chain stay, seat stay, and other components. I'm building out the chain ring and chain, and am now adjusting the geometric shapes and lines for a visually appealing aesthetic. I'm carefully constructing the bike to be accurate.
**Integrating the Bike**
I'm now integrating the finalized bicycle components with the Ampharos figure, layering them appropriately. I've placed the bike behind and in front of Ampharos, considering the arm and leg placements, and incorporating the pedal positions. I'm focusing on the position of each of the layers now. I've created the ground plane so the character doesn't seem to be floating.
**Finalizing Component Placement**
I'm now finalizing the placement of components, making sure that the layers are correctly ordered. The updated plan involves placing the bicycle frame before the main body, with the right leg overlapping the frame and the right pedal overlapping the right leg. The right crank and pedal have been added and I'm ensuring the correct overlap. Currently working on adding the front leg so that it overlaps the pedal slightly. I'm focusing on the final touches, working in the SVG now.
**Revising Body Parameters**
I'm now revising the body path, double-checking the geometric parameters for the torso. I've re-evaluated coordinates for the neck and belly, aiming for a smooth curve. I've focused on re-plotting the coordinates. I'm making sure it all fits with the proportions of the head and the position on the bike. I'm focusing on validating the path now.
**Validating the Belly**
My focus is validating the belly's white patch against the torso outline, confirming the curve's fit. I'm verifying the path now, ensuring the front edge aligns with the torso and the inner edge creates a smooth curve. I've re-examined the coordinates for that curve, and adjusted them as needed. I'm satisfied now with the coordinate alignment.
**Finalizing the Wheels**
I'm now implementing the wheel details, including spokes and tire outlines, and I'm updating both front and rear. I've switched from dashed circles to solid lines for the spokes, to make them look better. The new lines are now incorporated, including the tire thickness, and I'm fine-tuning the wheel's dimensions.
I'm now creating both front and rear wheels, finalizing the spoke placement and tire thickness.
**Adjusting Visual Style**
I'm now integrating a distinct stroke into the design. I'm applying a `#D4AC0D` stroke with a width of 3 to the body, which immediately creates better separation. I'm focusing on consistency with this visual element. I am now refining the right arm path. I've re-positioned and re-curved the arm path to flow more naturally, using `Q` curves for smooth transitions, and connecting to the handlebar at a better point. I'm now testing the yellow stroke for the leg.
**Refining the Art**
I'm now integrating dark outlines for a clean aesthetic. Adding a dark `stroke` and defining the `stroke-width` clearly separates the elements. I'm focusing on the strokes to provide a visually harmonious piece. I've updated body paths and the eye, and am double-checking the snout and forehead orb coordinates. I'm ensuring all the strokes are working together to enhance the overall aesthetic of the piece. I'm aiming for clear strokes.
**Finalizing Horns**
I'm now putting the finishing touches on the ears, and have refined the technique for adding the stripes. I'm redrawing the ear outline on top of the stripes to ensure clean edges and visual consistency. I've switched to `use` elements for geometric definitions to reduce code duplication and make the elements easier to adjust.
**Optimizing Element Integration**
I'm now switching from `<use>` elements to inline `<path>` definitions to ensure broad compatibility with older SVG viewers, focusing on using `xlink:href` to avoid older browser issues and maximize accessibility. I've re-written the ear elements, which includes the manual stripe drawings. I'm focusing on ensuring all graphics render consistently across all viewers.
**Refining the Stripes**
I'm now revising the approach to drawing the ear stripes. I'm opting to replace line elements within the `clipPath` with simpler rectangles. I'm focusing on ensuring the rectangles fit seamlessly within the clipped region. I'm also now adjusting the stroke width to refine the final visual aesthetic.
I've streamlined stripe generation by using rectangles inside a `clipPath`. Adjustments are underway.
**Finalizing SVG Rendering**
I'm now implementing the tail with outlines and fills, solving the outlining issue by creating another path with a thicker stroke behind it, which is the perfect solution for the tail. I've re-examined the coordinates, creating a perfect fit. I've switched to a rounded line cap with this approach. I'm focusing now on finalizing and exporting a ready-to-use SVG.
**Perfecting the Tail**
I've integrated the outlined tail, resolving visual issues using a layered stroke method: a thick black stroke, a thinner yellow path, and a dashed black stroke on top. I'm leveraging `stroke-dashoffset` for precise stripe alignment and finalized the red orb, all optimized for visual clarity.
**Adjusting Geometric Paths**
I'm now revising the torso and head path elements, specifically the geometric paths. I've re-adjusted the coordinates to refine the curves and improve the shape, making sure the lines connect in a more natural way. I'm focusing now on the crotch/leg area of the figure, ensuring the visual form. I am now refining the shape, which is a key part of the design.
**Connecting the Arms**
I'm now integrating the arms with the handlebars, precisely placing and connecting the left arm to the far handlebar at (460, 275) and adjusting the right arm. I'm building out paths, including the far arm, and focusing on path elements. I've re-adjusted the coordinates to match the paths, finalizing the left arm curve.
**Refining the Lower Body**
I'm now integrating the left leg and pedal with the bicycle, placing them behind the frame. I'm focusing on pathing the leg from the torso and integrating the pedal and crank, as well as the dark yellow color for the leg. I'm focusing on refining path elements to create a natural pose and ensure the leg visually interacts with the bicycle.
**Establishing the Rendering Order**
I'm now establishing the rendering order of the SVG elements to ensure proper layering and visual coherence. I've analyzed the relationships between the Ampharos and the bicycle components. Currently, I am constructing the layers to create a visually accurate and dynamic composition, including the ground and shadows. Then I'm working with the back wheel, the left crank and left pedal, and the bike frame.
**Finalizing Element Placement**
I've integrated the finalized path for Ampharos's right arm, carefully positioning the hand to overlap the handlebar, and I've added a small circle to represent the fist. I am refining the visual presentation and making the drawing more realistic, now. I'm focusing on these elements in the SVG and their precise placement.
**Refining the Framework**
I'm now switching the frame representation to discrete `<line>` elements to simplify the SVG, focusing on clarity. I'm adding an outline with a thicker black stroke for a cleaner visual, as a layering technique. The approach uses the same lines. I'm focusing on the frame and the black stroke to provide a better visual.
**Optimizing the Frame**
I'm now optimizing the bike frame using `<defs>` and `<use>` elements to streamline the SVG, reducing code. I've grouped frame lines for re-use and added a forked line as well. I'm focusing on defining geometric elements, using color contrast with the Pokémon's yellow to make the bike blue. I am focusing on simplifying and ensuring compatibility.
**Finalizing Design Integration**
I'm now integrating the final bicycle components, incorporating the chainring, seat, stem, and handlebars. I've focused on using `<line>` and `<path>` elements to construct and refine the bike's elements. I'm focusing on the stem, seat, and handlebars. I am now incorporating all the paths with final color adjustments and geometric path definitions.
**Integrating the Front Wheel**
I'm now integrating the front wheel, precisely positioning it to match the fork's geometry. I'm leveraging defined elements for the wheel structure. The front wheel uses the same structure. The visual balance is the focus, including wheel outlines, fills, and spoke placement. I'm placing the wheel structure at x=530, ensuring the integration with the fork lines.
**Implementing Wheel Instances**
I'm now implementing the wheels as instances to streamline the SVG structure, defining the wheel elements with `<defs>`. This way I've created reusable wheel structures, using `<use>` elements for instantiation. Currently, I'm integrating the front and rear wheels into the final SVG composition. I'm focusing on their positioning.
**Optimizing Component Positioning**
My work now involves optimizing wheel placement. Utilizing `<use>` and `<defs>` significantly enhances efficiency. I'm focusing on perfectly positioning the wheels relative to the bike frame, including the fork lines for visual balance. The cranks are also integrated: their base at 390, 450, with pedals positioned for natural interaction.
```xml
<use xlink:href="#wheel" x="230" y="450" />
```
**Adding Motion Lines**
I've integrated speed lines to the design for dynamism, using dashed lines to convey motion. I've incorporated these lines using the `<line>` element, and they're positioned to suggest forward movement. I've also reviewed the current SVG structure, and have incorporated the new lines. Now I am working on the composition and order of the elements.
**Refining Facial Features**
I'm now integrating a smile, pathing it with a curve for a cheerful expression. I've adjusted the eye's position, shifting it for a more balanced look, and refining the coordinates. I'm focusing on the position for the eye, and the curve and path of the smile. I've also incorporated a fist and the associated paths.
**Adding Visual Enhancements**
I'm now integrating subtle highlights, testing them on the belly and head to add depth, although I'm balancing that with the strength of the flat vector style with dark outlines. I am now working on verifying wheel and bike geometry; I've checked distances and positions, like the seat (360, 340) and stem (470, 280), with the back wheel at (230, 450) and the front at (530, 450), a distance of 300.
**Refining the Frame**
I've integrated the frame path parameters and re-checked coordinates for all the path components. The wheel dimensions are established, including the spoke count, placement, and tire size. I'm focusing on validating the bike frame's proportions, especially the frame diamond, with all lengths checked. The tail layering method, with the three-path approach for the black strokes and yellow path, looks perfect now.
**Finalizing the Ears**
I've perfected the ear stripes using `clipPath`, achieving flush stripes within the outline. I've now completed and tested both near and far ear designs, ensuring accuracy and consistency. The far ear is now implemented with a `clipPath`, and both ears use the same pathing. I'm focusing now on ensuring the paths are all using similar styling.
**Adding the Neck Stripe**
I'm now integrating Ampharos' neck stripe, and I'm using a thick stroke for a bold, flat style representation of the ring. I've re-adjusted the path coordinates, fine-tuning the neck curve, and have reviewed various options for this specific element. I'm focusing on ensuring it matches the overall aesthetic.
```xml
<path d="M 405 240 Q 440 260 468 225" fill="none" stroke="#212F3D" stroke-width="8" stroke-linecap="round"/>
```
**Validating Additional Features**
I'm now integrating Ampharos' final features, the claws/toes. I've focused on representing them realistically within the stylized design. I'm adding an additional line for each toe and refining the leg path to accommodate the new details. My goal is to ensure visual harmony. I'm also now adjusting the stroke of the ear and neck.
**Validating Geometric Shapes**
I'm now deeply engaged in confirming geometric accuracy, reviewing coordinates for Ampharos's torso path. I've been refining curves, focusing on smoothness. I'm double-checking alignment for the belly path against the chest edge. The goal is to perfect the overlap of the belly patch with the torso curve. I've revisited coordinates and reviewed paths.
**Revising Body Outline**
I'm now separating the torso into fill and outline layers, as the belly needs to be *under* the outline. I'm separating the existing torso path into two paths, one filled and one stroked, to ensure the belly sits behind the stroke and is visible. This allows correct visual layering. I'm focusing on now revising the code to reflect this change.
**Refining the Art**
I'm now revising the design and focusing on code organization and validation, ensuring the SVG is well-formed. I'm focusing on the structural consistency, ensuring proper XML namespaces and tidy indentation. I am now double-checking for possible overlaps or visual imperfections, particularly around the arms.
**Finalizing Layering and Composition**
I'm verifying the rendering order, confirming that each element layers correctly. The ground, shadow, and wheels are now integrated. I've double-checked all components, focusing on correct placement and visual appeal. I'm ensuring the final SVG is clean, well-ordered, and artistically sound, and am now adding dust clouds, integrating all the final elements for a polished, static image.
@SerJaimeLannister
Copy link
Author

This took around 380 seconds so consider 6-7 minutes

image

For reference, this is how ampharos looks

image

Source: https://ibispaint.com/art/140191683/

I think one of the reasons of picking ampharos that I observed later is that Ampharos actually usually looks on the left side (I observed this in images) and so the training data is less

So but the bicycle riding is always facing right.

Just did this out of curiosity.

@SerJaimeLannister
Copy link
Author

ampharos

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment