bicyle
Prompt
Make an SVG of a bicyle.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Bicycle SVG</title>
<style>
svg {
background-color: #fdfdfd;
}
.bike-lines {
stroke: #111;
stroke-width: 4;
stroke-linecap: round;
fill: none;
}
.wheel {
stroke: #111;
stroke-width: 4;
fill: none;
}
.spoke {
stroke: #666;
stroke-width: 2;
}
.small-part {
stroke-width: 3;
}
</style>
</head>
<body>
<svg width="400" height="220" viewBox="0 0 400 220" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title desc" role="img">
<title id="title">Stylized Bicycle</title>
<desc id="desc">A simple line drawing of a bicycle created with SVG primitives.</desc>
<!-- Wheels -->
<circle class="wheel" cx="100" cy="150" r="50"/>
<circle class="wheel" cx="300" cy="150" r="50"/>
<!-- Spokes (optional decorative) -->
<g class="spoke">
<!-- Rear wheel spokes -->
<line x1="100" y1="100" x2="100" y2="200"/>
<line x1="50" y1="150" x2="150" y2="150"/>
<line x1="65" y1="115" x2="135" y2="185"/>
<line x1="65" y1="185" x2="135" y2="115"/>
<!-- Front wheel spokes -->
<line x1="300" y1="100" x2="300" y2="200"/>
<line x1="250" y1="150" x2="350" y2="150"/>
<line x1="265" y1="115" x2="335" y2="185"/>
<line x1="265" y1="185" x2="335" y2="115"/>
</g>
<!-- Frame -->
<g class="bike-lines">
<!-- Chain stay -->
<line x1="100" y1="150" x2="170" y2="130"/>
<!-- Seat tube -->
<line x1="170" y1="130" x2="170" y2="80"/>
<!-- Top tube -->
<line x1="170" y1="80" x2="260" y2="90"/>
<!-- Down tube -->
<line x1="260" y1="90" x2="170" y2="130"/>
<!-- Fork -->
<line x1="260" y1="90" x2="300" y2="150"/>
<line x1="265" y1="95" x2="305" y2="150"/>
</g>
<!-- Seat -->
<line class="bike-lines" x1="150" y1="70" x2="190" y2="70"/>
<!-- Handlebars -->
<g class="bike-lines small-part">
<line x1="260" y1="90" x2="280" y2="70"/>
<line x1="240" y1="60" x2="300" y2="60"/>
<circle cx="240" cy="60" r="4" fill="#111"/>
<circle cx="300" cy="60" r="4" fill="#111"/>
</g>
<!-- Bottom bracket / crank -->
<g class="bike-lines small-part">
<circle cx="170" cy="130" r="10"/>
<line x1="170" y1="130" x2="190" y2="130"/>
<circle cx="190" cy="130" r="5" fill="#111"/>
</g>
</svg>
</body>
</html>
```Drag to resize
Of course, here is the HTML and SVG code to render a bicycle.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bicycle SVG</title>
<style>
/* Basic page styling */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f7f6;
font-family: sans-serif;
}
</style>
</head>
<body>
<svg width="80%" height="80%" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
<title>A line drawing of a modern bicycle</title>
<desc>An SVG illustration of a bicycle with a blue frame, dark wheels, and components.</desc>
<!-- Internal Stylesheet for the SVG components -->
<style>
.frame { stroke: #0077c0; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.wheel { stroke: #2c3e50; stroke-width: 12; fill: none; }
.spokes { stroke: #95a5a6; stroke-width: 3; }
.drivetrain { stroke: #34495e; stroke-width: 4; fill: none; }
.chainring { stroke: #34495e; stroke-width: 8; fill: none; }
.components { stroke: #2c3e50; stroke-width: 12; fill: #2c3e50; stroke-linecap: round; }
.seat { fill: #2c3e50; stroke: none; }
.pedal { fill: #7f8c8d; }
</style>
<!-- Rear Wheel -->
<g id="rear-wheel" transform="translate(200, 450)">
<circle cx="0" cy="0" r="130" class="wheel"/>
<g class="spokes">
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(0)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(30)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(60)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(90)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(120)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(150)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(180)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(210)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(240)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(270)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(300)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(330)"/>
</g>
<circle cx="0" cy="0" r="8" fill="#2c3e50"/> <!-- Hub -->
<circle cx="0" cy="0" r="25" class="drivetrain"/> <!-- Cassette -->
</g>
<!-- Front Wheel -->
<g id="front-wheel" transform="translate(700, 450)">
<circle cx="0" cy="0" r="130" class="wheel"/>
<g class="spokes">
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(0)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(30)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(60)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(90)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(120)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(150)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(180)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(210)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(240)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(270)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(300)"/>
<line x1="0" y1="0" x2="0" y2="-130" transform="rotate(330)"/>
</g>
<circle cx="0" cy="0" r="8" fill="#2c3e50"/> <!-- Hub -->
</g>
<!-- Drivetrain Parts: Chain, Chainring, Crank, Pedal -->
<g id="drivetrain-parts">
<circle cx="400" cy="450" r="45" class="chainring"/>
<!-- Chain -->
<path class="drivetrain" d="M 400 405 L 200 429 M 400 495 L 200 471" />
<g id="crankset">
<!-- Crank arm -->
<line x1="400" y1="450" x2="480" y2="420" class="components" stroke-width="10"/>
<!-- Pedal -->
<polygon points="495,410 475,410 465,430 485,430" class="pedal"/>
</g>
<circle cx="400" cy="450" r="10" fill="#2c3e50"/><!-- Bottom Bracket bolt -->
</g>
<!-- Main Bike Frame -->
<g id="bike-frame">
<path class="frame" d="
M 400,450 L 200,450 /* Chain Stay */
M 350,250 L 200,450 /* Seat Stay */
M 400,450 L 580,320 /* Down Tube */
M 400,450 L 350,250 /* Seat Tube */
M 350,250 L 600,270 /* Top Tube */
M 580,320 L 700,450 /* Fork */
M 580,320 L 600,270 /* Head Tube */
"/>
</g>
<!-- Other Components: Seat, Handlebars -->
<g id="other-components">
<!-- Seat and post -->
<line x1="350" y1="250" x2="350" y2="220" class="components" stroke-width="10"/>
<path class="seat" d="M 310,220 L 390,220 L 380,235 L 320,235 Z" />
<!-- Handlebars and stem -->
<line x1="600" y1="270" x2="650" y2="210" class="components" stroke-width="10"/>
<line x1="610" y1="210" x2="690" y2="210" class="components" stroke-width="16"/>
</g>
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bicycle SVG</title>
<style>
body {
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>
</head>
<body>
<svg width="400" height="240" viewBox="0 0 400 240" xmlns="http://www.w3.org/2000/svg">
<!-- Wheels -->
<circle cx="80" cy="180" r="60" fill="#fff" stroke="#222" stroke-width="8"/>
<circle cx="320" cy="180" r="60" fill="#fff" stroke="#222" stroke-width="8"/>
<!-- Wheel hubs -->
<circle cx="80" cy="180" r="8" fill="#222"/>
<circle cx="320" cy="180" r="8" fill="#222"/>
<!-- Frame -->
<polyline points="80,180 170,110 230,180 320,180 200,180 170,110"
fill="none" stroke="#287bb6" stroke-width="10" stroke-linecap="round"/>
<!-- Seat tube -->
<line x1="170" y1="110" x2="170" y2="60" stroke="#287bb6" stroke-width="8" stroke-linecap="round"/>
<!-- Handlebars -->
<line x1="230" y1="180" x2="260" y2="70" stroke="#287bb6" stroke-width="8" stroke-linecap="round"/>
<line x1="260" y1="70" x2="245" y2="60" stroke="#222" stroke-width="6" stroke-linecap="round"/>
<line x1="260" y1="70" x2="274" y2="80" stroke="#222" stroke-width="6" stroke-linecap="round"/>
<!-- Saddle -->
<rect x="158" y="48" width="25" height="10" rx="4" fill="#333"/>
<!-- Pedals -->
<circle cx="200" cy="180" r="11" fill="#fff" stroke="#222" stroke-width="5"/>
<line x1="200" y1="180" x2="187" y2="197" stroke="#222" stroke-width="5" stroke-linecap="round"/>
<rect x="179" y="194" width="16" height="8" rx="3" fill="#333"/>
<line x1="200" y1="180" x2="215" y2="171" stroke="#222" stroke-width="5" stroke-linecap="round"/>
<rect x="210" y="163" width="15" height="8" rx="3" fill="#333"/>
<!-- Optional: Street shadow under bike -->
<ellipse cx="200" cy="215" rx="115" ry="10" fill="#bbb" fill-opacity="0.2"/>
</svg>
</body>
</html>
```Drag to resize
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"> <!-- Wheels --> <circle cx="100" cy="100" r="30" fill="black"/> <circle cx="300" cy="100" r="30" fill="black"/> <!-- Wheel spokes front --> <line x1="100" y1="100" x2="100" y2="70" stroke="black"/> <line x1="100" y1="100" x2="130" y2="100" stroke="black"/> <line x1="100" y1="100" x2="100" y2="130" stroke="black"/> <line x1="100" y1="100" x2="70" y2="100" stroke="black"/> <!-- Frame --> <line x1="100" y1="100" x2="200" y2="50" stroke="black" stroke-width="4"/> <line x1="200" y1="50" x2="300" y2="100" stroke="black" stroke-width="4"/> <line x1="100" y1="100" x2="200" y2="130" stroke="black" stroke-width="4"/> <line x1="200" y1="130" x2="300" y2="100" stroke="black" stroke-width="4"/> <!-- Handlebars --> <line x1="100" y1="100" x2="100" y2="70" stroke="black" stroke-width="3"/> <line x1="100" y1="70" x2="80" y2="70" stroke="black" stroke-width="3"/> <line x1="100" y1="70" x2="120" y2="70" stroke="black" stroke-width="3"/> <!-- Seat --> <line x1="200" y1="50" x2="200" y2="30" stroke="black" stroke-width="2"/> <line x1="190" y1="30" x2="210" y2="30" stroke="black" stroke-width="2"/> <!-- Pedals --> <circle cx="200" cy="130" r="5" fill="black"/> <line x1="200" y1="130" x2="190" y2="150" stroke="black" stroke-width="2"/> <line x1="200" y1="130" x2="210" y2="150" stroke="black" stroke-width="2"/> </svg>
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bicycle SVG</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
svg { max-width: 100%; height: auto; }
</style>
</head>
<body>
<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
<!-- Rear wheel -->
<circle cx="100" cy="150" r="50" stroke="black" stroke-width="4" fill="none" />
<!-- Front wheel -->
<circle cx="300" cy="150" r="50" stroke="black" stroke-width="4" fill="none" />
<!-- Frame -->
<line x1="100" y1="150" x2="200" y2="100" stroke="black" stroke-width="4" />
<line x1="200" y1="100" x2="300" y2="150" stroke="black" stroke-width="4" />
<line x1="150" y1="150" x2="200" y2="100" stroke="black" stroke-width="4" />
<line x1="150" y1="150" x2="250" y2="150" stroke="black" stroke-width="4" />
<!-- Seat -->
<line x1="150" y1="150" x2="150" y2="80" stroke="black" stroke-width="4" />
<line x1="140" y1="80" x2="160" y2="80" stroke="black" stroke-width="4" />
<!-- Handlebars -->
<line x1="250" y1="100" x2="250" y2="50" stroke="black" stroke-width="4" />
<line x1="240" y1="50" x2="260" y2="50" stroke="black" stroke-width="4" />
<line x1="250" y1="50" x2="280" y2="70" stroke="black" stroke-width="4" />
<!-- Pedals -->
<circle cx="150" cy="150" r="10" stroke="black" stroke-width="4" fill="none" />
<line x1="150" y1="140" x2="150" y2="160" stroke="black" stroke-width="4" />
<line x1="140" y1="150" x2="160" y2="150" stroke="black" stroke-width="4" />
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>SVG Bicycle</title>
</head>
<body>
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<!-- Back wheel -->
<circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="none" />
<circle cx="100" cy="100" r="5" stroke="black" stroke-width="1" fill="black" />
<!-- Front wheel -->
<circle cx="220" cy="100" r="40" stroke="black" stroke-width="3" fill="none" />
<circle cx="220" cy="100" r="5" stroke="black" stroke-width="1" fill="black" />
<!-- Frame -->
<path d="M100 100 L140 60 L180 60 L220 100" stroke="black" stroke-width="3" fill="none" />
<path d="M140 60 L140 100" stroke="black" stroke-width="3" fill="none" />
<!-- Seat -->
<path d="M120 60 L140 60 L135 45" stroke="black" stroke-width="2" fill="none" />
<!-- Handlebars -->
<path d="M180 60 L200 40" stroke="black" stroke-width="3" fill="none" />
<path d="M190 35 L210 35" stroke="black" stroke-width="3" fill="none" />
<!-- Pedals -->
<circle cx="140" cy="100" r="15" stroke="black" stroke-width="2" fill="none" />
<line x1="127" y1="100" x2="153" y2="100" stroke="black" stroke-width="2" />
</svg>
</body>
</html>
```Drag to resize
```html <svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- Frame --> <rect x="20" y="40" width="60" height="10" rx="5" fill="#666" /> <path d="M 20 45 L 30 70" stroke="#666" stroke-width="5" /> <path d="M 80 45 L 70 70" stroke="#666" stroke-width="5" /> <path d="M 30 70 L 70 70" stroke="#666" stroke-width="5" /> <path d="M 30 70 L 20 45 M 70 70 L 80 45" stroke="#666" stroke-width="5" fill="none" /> <!-- Wheels --> <circle cx="35" cy="85" r="15" fill="#333" /> <circle cx="65" cy="85" r="15" fill="#333" /> <!-- Pedals --> <circle cx="35" cy="85" r="3" fill="#999" /> <circle cx="65" cy="85" r="3" fill="#999" /> <path d="M 35 85 L 30 75" stroke="#999" stroke-width="2" /> <path d="M 65 85 L 70 75" stroke="#999" stroke-width="2" /> <!-- Seat --> <rect x="45" y="30" width="10" height="10" fill="#666" /> </svg> ```
Drag to resize
Here's an HTML file that displays a bicycle using SVG with responsive scaling:
```html
<!DOCTYPE html>
<html>
<head>
<title>Bicycle SVG</title>
<style>
body {
margin: 0;
padding: 0;
background-color: white;
display: grid;
place-items: center;
min-height: 100vh;
}
svg {
max-height: 100vh;
width: auto;
}
</style>
</head>
<body>
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<!-- Wheels -->
<circle cx="100" cy="150" r="30" stroke="black" stroke-width="2" fill="none"/>
<circle cx="200" cy="150" r="30" stroke="black" stroke-width="2" fill="none"/>
<!-- Frame -->
<!-- Chain stay -->
<line x1="100" y1="150" x2="120" y2="150" stroke="black" stroke-width="5"/>
<!-- Seat tube & top tube -->
<path d="M120,150 L130,100 L180,100" stroke="black" stroke-width="5" fill="none"/>
<!-- Fork -->
<line x1="180" y1="100" x2="200" y2="150" stroke="black" stroke-width="5"/>
<!-- Seat -->
<polyline points="125,100 130,95 135,100" stroke="black" stroke-width="2" fill="none"/>
<!-- Handlebars -->
<line x1="180" y1="100" x2="180" y2="90" stroke="black" stroke-width="5"/>
<line x1="165" y1="90" x2="195" y2="90" stroke="black" stroke-width="2"/>
<!-- Bottom bracket -->
<circle cx="120" cy="150" r="5" fill="black"/>
<!-- Crankset -->
<line x1="120" y1="150" x2="105" y2="165" stroke="black" stroke-width="3"/>
<line x1="120" y1="150" x2="135" y2="135" stroke="black" stroke-width="3"/>
<circle cx="105" cy="165" r="3" fill="none" stroke="black" stroke-width="2"/>
<circle cx="135" cy="135" r="3" fill="none" stroke="black" stroke-width="2"/>
<!-- Wheel hubs -->
<circle cx="100" cy="150" r="8" fill="white" stroke="black" stroke-width="1"/>
<circle cx="200" cy="150" r="8" fill="white" stroke="black" stroke-width="1"/>
<circle cx="100" cy="150" r="3" fill="black"/>
<circle cx="200" cy="150" r="3" fill="black"/>
<!-- Spokes -->
<path d="M100 150l-15 -15" stroke="black" stroke-width="1" stroke-dasharray="2"/>
<path d="M100 150l15 -15" stroke="black" stroke-width="1" stroke-dasharray="2"/>
<path d="M100 150l15 15" stroke="black" stroke-width="1" stroke-dasharray="2"/>
<path d="M100 150l-15 15" stroke="black" stroke-width="1" stroke-dasharray="2"/>
<path d="M200 150l-15 -15" stroke="black" stroke-width="1" stroke-dasharray="2"/>
<path d="M200 150l15 -15" stroke="black" stroke-width="1" stroke-dasharray="2"/>
<path d="M200 150l15 15" stroke="black" stroke-width="1" stroke-dasharray="2"/>
<path d="M200 150l-15 15" stroke="black" stroke-width="1" stroke-dasharray="2"/>
</svg>
</body>
</html>
```
This bicycle SVG features:
1. Two wheels with hubs and dashed spokes
2. Full bicycle frame and fork
3. Realistic seat shape
4. Handlebars with stem
5. Bottom bracket with crankset and pedals
6. Styling with varying line weights
7. Responsive design that adjusts to the iframe/viewport size
8. Clean minimalist design with black lines on white background
The bicycle is centered both in the SVG canvas and in the browser viewport. The dashed spokes provide visual interest without overwhelming the design, and the thicker stroke widths for the frame emphasize structural components. The entire illustration scales proportionally when resized.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bicycle SVG</title>
</head>
<body>
<svg width="400" height="250" viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
<!-- Back wheel -->
<circle cx="80" cy="180" r="50" fill="none" stroke="#333" stroke-width="8"/>
<circle cx="80" cy="180" r="35" fill="none" stroke="#666" stroke-width="2"/>
<circle cx="80" cy="180" r="5" fill="#333"/>
<!-- Front wheel -->
<circle cx="320" cy="180" r="50" fill="none" stroke="#333" stroke-width="8"/>
<circle cx="320" cy="180" r="35" fill="none" stroke="#666" stroke-width="2"/>
<circle cx="320" cy="180" r="5" fill="#333"/>
<!-- Main frame -->
<!-- Top tube -->
<line x1="80" y1="180" x2="200" y2="100" stroke="#2c5aa0" stroke-width="6"/>
<!-- Down tube -->
<line x1="80" y1="180" x2="200" y2="180" stroke="#2c5aa0" stroke-width="6"/>
<!-- Seat tube -->
<line x1="200" y1="100" x2="200" y2="180" stroke="#2c5aa0" stroke-width="6"/>
<!-- Fork and head tube -->
<line x1="200" y1="100" x2="320" y2="130" stroke="#2c5aa0" stroke-width="6"/>
<line x1="320" y1="130" x2="320" y2="180" stroke="#2c5aa0" stroke-width="6"/>
<!-- Chain stay -->
<line x1="200" y1="180" x2="320" y2="180" stroke="#2c5aa0" stroke-width="6"/>
<!-- Seat -->
<ellipse cx="190" cy="90" rx="25" ry="8" fill="#333"/>
<line x1="190" y1="90" x2="200" y2="100" stroke="#666" stroke-width="3"/>
<!-- Handlebars -->
<line x1="320" y1="130" x2="320" y2="110" stroke="#333" stroke-width="4"/>
<line x1="310" y1="110" x2="330" y2="110" stroke="#333" stroke-width="6"/>
<!-- Pedals and crank -->
<circle cx="200" cy="180" r="8" fill="none" stroke="#333" stroke-width="3"/>
<line x1="185" y1="180" x2="215" y2="180" stroke="#333" stroke-width="4"/>
<rect x="180" y="176" width="10" height="8" fill="#666"/>
<rect x="210" y="176" width="10" height="8" fill="#666"/>
<!-- Chain -->
<ellipse cx="240" cy="180" rx="40" ry="8" fill="none" stroke="#444" stroke-width="2" stroke-dasharray="3,2"/>
<!-- Spokes for back wheel -->
<g stroke="#666" stroke-width="1">
<line x1="80" y1="130" x2="80" y2="230"/>
<line x1="30" y1="180" x2="130" y2="180"/>
<line x1="51" y1="151" x2="109" y2="209"/>
<line x1="109" y1="151" x2="51" y2="209"/>
</g>
<!-- Spokes for front wheel -->
<g stroke="#666" stroke-width="1">
<line x1="320" y1="130" x2="320" y2="230"/>
<line x1="270" y1="180" x2="370" y2="180"/>
<line x1="291" y1="151" x2="349" y2="209"/>
<line x1="349" y1="151" x2="291" y2="209"/>
</g>
</svg>
</body>
</html>
```Drag to resize