Skip to content

Instantly share code, notes, and snippets.

@simonw

simonw/animated.md Secret

Created December 6, 2024 18:40
Show Gist options
  • Save simonw/4728316a9e4854c6e62fa25c40759bb6 to your computer and use it in GitHub Desktop.
Save simonw/4728316a9e4854c6e62fa25c40759bb6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animated.md

2024-12-06T17:25:07 conversation: 01jeeg3kfg6b21mf4hjgswjpe3

Model: gemini-exp-1206

Prompt:

Generate an SVG of a pelican riding a bicycle

Response:

<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <title>Pelican Riding a Bicycle</title>

  <!-- Background (Optional - Sky and Ground) -->
  <rect x="0" y="0" width="400" height="200" fill="#87CEEB" /> <!-- Sky -->
  <rect x="0" y="200" width="400" height="100" fill="#90EE90" /> <!-- Ground -->

  <!-- Bicycle -->
  <g id="bicycle">
    <!-- Frame -->
    <line x1="150" y1="250" x2="250" y2="250" stroke="black" stroke-width="3" />
    <line x1="180" y1="220" x2="220" y2="220" stroke="black" stroke-width="3" />
    <line x1="150" y1="250" x2="180" y2="220" stroke="black" stroke-width="3" />
    <line x1="250" y1="250" x2="220" y2="220" stroke="black" stroke-width="3" />
    <line x1="180" y1="220" x2="195" y2="180" stroke="black" stroke-width="3" /> 
    
    <!-- Wheels -->
    <circle cx="150" cy="250" r="30" fill="none" stroke="black" stroke-width="5" />
    <circle cx="250" cy="250" r="30" fill="none" stroke="black" stroke-width="5" />
    <!-- Spokes (simplified) -->
    <line x1="150" y1="250" x2="150" y2="220" stroke="black" stroke-width="1" />
    <line x1="150" y1="250" x2="150" y2="280" stroke="black" stroke-width="1" />
    <line x1="150" y1="250" x2="171" y2="229" stroke="black" stroke-width="1" />
    <line x1="150" y1="250" x2="129" y2="271" stroke="black" stroke-width="1" />
    <line x1="250" y1="250" x2="250" y2="220" stroke="black" stroke-width="1" />
    <line x1="250" y1="250" x2="250" y2="280" stroke="black" stroke-width="1" />
    <line x1="250" y1="250" x2="271" y2="229" stroke="black" stroke-width="1" />
    <line x1="250" y1="250" x2="229" y2="271" stroke="black" stroke-width="1" />

    <!-- Handlebars -->
    <line x1="195" y1="180" x2="185" y2="170" stroke="black" stroke-width="3" />
    <line x1="195" y1="180" x2="205" y2="170" stroke="black" stroke-width="3" />
    
    <!-- Seat -->
    <rect x="215" y="210" width="10" height="5" fill="brown" stroke="black" stroke-width="1"/>

    <!-- Pedals -->
    <circle cx="200" cy="250" r="5" fill="black"/>
    <rect x="195" y="245" width="10" height="2" fill="black"/> 
    <rect x="195" y="253" width="10" height="2" fill="black"/>
    

  </g>

  <!-- Pelican -->
  <g id="pelican" transform="translate(50, 30)">
    <!-- Body -->
    <ellipse cx="150" cy="170" rx="35" ry="25" fill="white" stroke="black" stroke-width="2" />
    
    <!-- Head -->
    <circle cx="185" cy="145" r="20" fill="white" stroke="black" stroke-width="2" />

    <!-- Beak -->
    <polygon points="195,145 245,135 245,155 205,150" fill="orange" stroke="black" stroke-width="2" />
    <line x1="195" y1="145" x2="245" y2="145" stroke="black" stroke-width="2"/>

    <!-- Eye -->
    <circle cx="195" cy="140" r="3" fill="black" />

    <!-- Neck -->
    <path d="M 185 160 Q 195 175 150 170" fill="none" stroke="black" stroke-width="2"/>

    <!-- Wing -->
    <path d="M 150 170 Q 100 150 120 190 Z" fill="white" stroke="black" stroke-width="2"/>
    
    <!-- Legs and Feet (simplified) -->
    <line x1="140" y1="195" x2="140" y2="220" stroke="orange" stroke-width="3" />
    <line x1="160" y1="195" x2="150" y2="220" stroke="orange" stroke-width="3" />
    <path d="M 140 220 L 135 225 L 145 225 Z" fill="orange" />
    <path d="M 150 220 L 145 225 L 155 225 Z" fill="orange" />

    <!-- Feet on Pedals -->
    <g transform="translate(10, 28)">
       <path d="M 140 220 L 135 225 L 145 225 Z" fill="orange" />
       <path d="M 150 220 L 145 225 L 155 225 Z" fill="orange" />
    </g>
  </g>
</svg>

Explanation and Key Elements:

  1. <svg> tag: Defines the SVG canvas, sets the width, height, and viewBox (important for scaling).
  2. <title> tag: Provides a descriptive title for the image (good for accessibility).
  3. Background (Optional): The <rect> elements create a simple sky and ground using blue (#87CEEB) and green (#90EE90) colors.
  4. Bicycle (<g id="bicycle">):
    • <line> elements: Used to create the frame, handlebars, and spokes.
    • <circle> elements: Form the wheels and the center point for the pedals.
    • <rect> elements: Used for the seat and pedals.
  5. Pelican (<g id="pelican">):
    • <ellipse>: Creates the main body shape.
    • <circle>: Forms the head.
    • <polygon>: Shapes the distinctive pelican beak, with an added line for the lower mandible.
    • <path> elements: Used for the curved neck and the wing. d attribute defines the path using commands like M (move to), Q (quadratic Bezier curve), and Z (close path).
    • <line> elements: Create the legs.
    • The pelican's feet are simplified to triangle shapes using <path>.
    • transform="translate(50, 30)": This attribute on the pelican's <g> tag moves the entire pelican group 50 units to the right and 30 units down, positioning it correctly on the bicycle.
    • The second feet group transform="translate(10, 28)" on another <g> tag moves the feet to be on the pedals.

How to Use:

  1. Save: Copy the code and save it as an .svg file (e.g., pelican_bike.svg).
  2. View: Open the .svg file in any modern web browser or an SVG editor (like Inkscape).

Customization:

  • Colors: Change the fill and stroke attributes to modify colors.
  • Details: Add more details like feathers, a more complex bicycle frame, or a cycling helmet for the pelican.
  • Animation: You could add SVG animation to make the pelican pedal and the wheels turn.
  • Styling: Add a <style> tag within the <svg> for more advanced styling with CSS.

This SVG code provides a basic but recognizable depiction of a pelican riding a bicycle. Feel free to experiment and modify it to create your own unique version!

2024-12-06T18:37:18

Prompt:

now animate it

Response:

<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <title>Pelican Riding a Bicycle</title>

  <!-- Background (Optional - Sky and Ground) -->
  <rect x="0" y="0" width="400" height="200" fill="#87CEEB" />
  <rect x="0" y="200" width="400" height="100" fill="#90EE90" />

  <!-- Bicycle -->
  <g id="bicycle">
    <!-- Frame -->
    <line x1="150" y1="250" x2="250" y2="250" stroke="black" stroke-width="3" />
    <line x1="180" y1="220" x2="220" y2="220" stroke="black" stroke-width="3" />
    <line x1="150" y1="250" x2="180" y2="220" stroke="black" stroke-width="3" />
    <line x1="250" y1="250" x2="220" y2="220" stroke="black" stroke-width="3" />
    <line x1="180" y1="220" x2="195" y2="180" stroke="black" stroke-width="3" />

    <!-- Wheels -->
    <circle id="front-wheel" cx="150" cy="250" r="30" fill="none" stroke="black" stroke-width="5" />
    <circle id="back-wheel" cx="250" cy="250" r="30" fill="none" stroke="black" stroke-width="5" />
    <!-- Spokes (simplified) -->
    <line x1="150" y1="250" x2="150" y2="220" stroke="black" stroke-width="1" />
    <line x1="150" y1="250" x2="150" y2="280" stroke="black" stroke-width="1" />
    <line x1="150" y1="250" x2="171" y2="229" stroke="black" stroke-width="1" />
    <line x1="150" y1="250" x2="129" y2="271" stroke="black" stroke-width="1" />
    <line x1="250" y1="250" x2="250" y2="220" stroke="black" stroke-width="1" />
    <line x1="250" y1="250" x2="250" y2="280" stroke="black" stroke-width="1" />
    <line x1="250" y1="250" x2="271" y2="229" stroke="black" stroke-width="1" />
    <line x1="250" y1="250" x2="229" y2="271" stroke="black" stroke-width="1" />

    <!-- Handlebars -->
    <line x1="195" y1="180" x2="185" y2="170" stroke="black" stroke-width="3" />
    <line x1="195" y1="180" x2="205" y2="170" stroke="black" stroke-width="3" />

    <!-- Seat -->
    <rect x="215" y="210" width="10" height="5" fill="brown" stroke="black" stroke-width="1" />

    <!-- Pedals -->
    <g id="pedals">
      <circle cx="200" cy="250" r="5" fill="black" />
      <rect id="pedal1" x="195" y="245" width="10" height="2" fill="black" />
      <rect id="pedal2" x="195" y="253" width="10" height="2" fill="black" />
    </g>
  </g>

  <!-- Pelican -->
  <g id="pelican" transform="translate(50, 30)">
    <!-- Body -->
    <ellipse cx="150" cy="170" rx="35" ry="25" fill="white" stroke="black" stroke-width="2" />

    <!-- Head -->
    <circle cx="185" cy="145" r="20" fill="white" stroke="black" stroke-width="2" />

    <!-- Beak -->
    <polygon points="195,145 245,135 245,155 205,150" fill="orange" stroke="black" stroke-width="2" />
    <line x1="195" y1="145" x2="245" y2="145" stroke="black" stroke-width="2" />

    <!-- Eye -->
    <circle cx="195" cy="140" r="3" fill="black" />

    <!-- Neck -->
    <path d="M 185 160 Q 195 175 150 170" fill="none" stroke="black" stroke-width="2" />

    <!-- Wing -->
    <path id="wing" d="M 150 170 Q 100 150 120 190 Z" fill="white" stroke="black" stroke-width="2" />

    <!-- Legs (simplified) -->
    <line id="leg1" x1="140" y1="195" x2="140" y2="220" stroke="orange" stroke-width="3" />
    <line id="leg2" x1="160" y1="195" x2="150" y2="220" stroke="orange" stroke-width="3" />

    <!-- Feet -->
    <g id="feet" transform="translate(10, 28)">
      <path id="foot1" d="M 140 220 L 135 225 L 145 225 Z" fill="orange" />
      <path id="foot2" d="M 150 220 L 145 225 L 155 225 Z" fill="orange" />
    </g>
  </g>

  <!-- Animations -->
  <animateTransform
    xlink:href="#front-wheel"
    attributeName="transform"
    type="rotate"
    from="0 150 250"
    to="360 150 250"
    dur="2s"
    repeatCount="indefinite"
  />
  <animateTransform
    xlink:href="#back-wheel"
    attributeName="transform"
    type="rotate"
    from="0 250 250"
    to="360 250 250"
    dur="2s"
    repeatCount="indefinite"
  />
  <animateTransform
    xlink:href="#pedals"
    attributeName="transform"
    type="rotate"
    from="0 200 250"
    to="360 200 250"
    dur="2s"
    repeatCount="indefinite"
  />

  <!-- Animate leg and foot movement -->
  <animate
    xlink:href="#leg1"
    attributeName="x2"
    values="140; 150; 140"
    keyTimes="0; 0.5; 1"
    dur="1s"
    repeatCount="indefinite"
  />
  <animate
    xlink:href="#leg2"
    attributeName="x2"
    values="150; 140; 150"
    keyTimes="0; 0.5; 1"
    dur="1s"
    repeatCount="indefinite"
  />
  <animate
    xlink:href="#foot1"
    attributeName="d"
    values="M 140 220 L 135 225 L 145 225 Z; M 150 220 L 145 225 L 155 225 Z; M 140 220 L 135 225 L 145 225 Z"
    keyTimes="0; 0.5; 1"
    dur="1s"
    repeatCount="indefinite"
  />
  <animate
    xlink:href="#foot2"
    attributeName="d"
    values="M 150 220 L 145 225 L 155 225 Z; M 140 220 L 135 225 L 145 225 Z; M 150 220 L 145 225 L 155 225 Z"
    keyTimes="0; 0.5; 1"
    dur="1s"
    repeatCount="indefinite"
  />
    <animate
    xlink:href="#wing"
    attributeName="d"
    values="M 150 170 Q 100 150 120 190 Z; M 150 170 Q 110 140 120 190 Z; M 150 170 Q 100 150 120 190 Z"
    keyTimes="0; 0.5; 1"
    dur="1s"
    repeatCount="indefinite"
  />

</svg>

Explanation of Animations:

  1. Wheel Rotation:

    • animateTransform is used to rotate the wheels.
    • xlink:href targets the wheel element (e.g., #front-wheel).
    • attributeName="transform" specifies that we're animating the transform attribute.
    • type="rotate" indicates a rotation animation.
    • from and to define the start and end angles of rotation, along with the center of rotation (the wheel's center).
    • dur="2s" sets the duration of one rotation to 2 seconds.
    • repeatCount="indefinite" makes the animation loop continuously.

  2. Pedal Rotation:

    • Similar to wheel rotation, animateTransform is used to rotate the #pedals group.
    • The center of rotation is the center of the pedal circle.

  3. Leg and Foot Movement:

    • animate is used to change the x2 coordinate of the leg lines and the d attribute (path definition) of the feet.
    • values defines the sequence of values for the attribute being animated.
    • keyTimes specifies the timing of each value within the animation duration (0, 0.5, and 1 correspond to the start, middle, and end of the 1-second duration).
    • This creates a back-and-forth pedaling motion.
    • The foot animation changes the shape (d attribute) to make it look like it is pushing the pedal.

  4. Wing Movement

    • animate is used to change the d attribute (path definition) of the wing.
    • values defines the sequence of values for the attribute being animated.
    • keyTimes specifies the timing of each value within the animation duration.
    • This creates an up-and-down motion for the wing.

Key Improvements:

  • IDs: Elements that are animated now have unique IDs (e.g., #front-wheel, #leg1, #foot1) so they can be targeted by the animation elements.
  • Simplified Leg/Foot Animation: The animation is more streamlined and focuses on creating a basic pedaling illusion.
  • Animation Timing: keyTimes is used to control the timing of the leg and foot movements, making them more synchronized.

Further Enhancements (Optional):

  • Head Bobbing: Animate the pelican's head with a slight up-and-down or side-to-side motion.
  • Body Movement: Make the pelican's body move slightly up and down to simulate the effort of pedaling.
  • More Realistic Pedaling: You could add more steps to the leg and foot animation to create a more circular pedaling motion instead of just back and forth.
  • Smooth Transitions: Use calcMode="spline" and keySplines within the animate and animateTransform elements to create smoother, more natural-looking transitions between animation steps.
  • Forward Motion: Add an animation that moves the whole scene (bicycle and pelican) horizontally to simulate forward motion.

This improved and animated SVG will now show a pelican pedaling a bicycle with rotating wheels!

@simonw
Copy link
Author

simonw commented Dec 6, 2024

animated-loop

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