Skip to content

Instantly share code, notes, and snippets.

@simonw
Created January 8, 2025 17:51
Show Gist options
  • Save simonw/f58e464dd653e1c637cf42d18416344d to your computer and use it in GitHub Desktop.
Save simonw/f58e464dd653e1c637cf42d18416344d to your computer and use it in GitHub Desktop.

Creating an SVG (Scalable Vector Graphics) file involves writing XML-based code to define the shapes and paths that make up the image. Below is a simple example of an SVG depicting a pelican riding a bicycle. This is a basic representation and can be further refined with more details and styling.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Bicycle Frame -->
  <rect x="50" y="100" width="100" height="10" fill="black"/>
  <rect x="70" y="110" width="60" height="10" fill="black"/>
  <circle cx="100" cy="120" r="10" fill="black"/>
  <circle cx="100" cy="140" r="10" fill="black"/>
  <line x1="100" y1="130" x2="100" y2="150" stroke="black" stroke-width="2"/>
  <line x1="100" y1="150" x2="120" y2="170" stroke="black" stroke-width="2"/>
  <line x1="100" y1="150" x2="80" y2="170" stroke="black" stroke-width="2"/>

  <!-- Pelican Body -->
  <ellipse cx="90" cy="80" rx="20" ry="10" fill="blue"/>
  <circle cx="90" cy="70" r="5" fill="yellow"/>
  <circle cx="80" cy="60" r="5" fill="yellow"/>
  <circle cx="100" cy="60" r="5" fill="yellow"/>

  <!-- Pelican Beak -->
  <polygon points="90,75 85,65 95,65" fill="orange"/>

  <!-- Pelican Wings -->
  <path d="M 70 70 Q 60 60, 50 70" fill="blue"/>
  <path d="M 110 70 Q 120 60, 130 70" fill="blue"/>

  <!-- Pelican Legs -->
  <line x1="85" y1="90" x2="85" y2="100" stroke="black" stroke-width="2"/>
  <line x1="105" y1="90" x2="105" y2="100" stroke="black" stroke-width="2"/>
</svg>

Explanation:

  • Bicycle Frame: Created using rectangles and circles to represent the frame, wheels, and handlebars.
  • Pelican Body: An ellipse for the body, circles for the eyes, and a polygon for the beak.
  • Pelican Wings: Quadratic Bezier curves (Q) to create the wing shapes.
  • Pelican Legs: Lines to represent the legs.

This SVG is quite basic and can be enhanced with more details, colors, and styling to make it more realistic or stylized according to your preference. You can open this SVG code in a text editor and save it with a .svg extension, then view it in a web browser to see the result.<|im_end|>

==========

Prompt: 17 tokens, 108.107 tokens-per-sec
Generation: 662 tokens, 39.370 tokens-per-sec
Peak memory: 8.419 GB

@simonw
Copy link
Author

simonw commented Jan 8, 2025

CleanShot 2025-01-08 at 09 54 53@2x

@blu3r4d0n
Copy link

blu3r4d0n commented Jan 8, 2025

@simonw have you ever seen an LLM that did it from this angle?

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