Bicycle — SVG

I'm planning out an 800x500 SVG bicycle illustration, working out wheel positions, radii, and frame geometry for a detailed side-view drawing with spokes, handlebars, seat, pedals, and chain, plus a subtle wheel-rotation animation. Calculating the tangent lines for the chain path connecting the chainring and rear cog, approximating the angle since the two circles differ in radius but share a center height. Working out the arc flags for both circles based on chord position relative to center, determining large-arc and sweep values so the chain path wraps correctly around the chainring and cog. For the tangent points themselves, I'm computing the external tangent angle using the radius difference and center distance, then finding where the tangent line touches each circle. Computing the four tangent points numerically confirms my estimates, giving P1≈(198.5,317.1), P2≈(366.4,298.2) on top and mirrored points on bottom. I'm now assembling these into the SVG path with two arcs connecting the circles, forming the closed chain outline. Interesting realization: the two tangent points on the large circle are exactly antipodal, meaning the chord between them passes through the center — so that arc segment is actually a full diameter, making the large arc simpler than expected. For spokes, I'm planning to build a reusable wheel group with rotated line elements at regular angular intervals, then reference it with `` for both wheels, adding CSS animations to spin the spokes and crank. I'm considering whether to rely on CSS transform-origin (which can be inconsistent for SVG bounding boxes) versus using native SVG animateTransform for rotating the wheel spokes reliably around their centers. For gearing accuracy, I want the crank rotation to be slower than the wheel's since the chainring-to-cog ratio is roughly 32:13, meaning the wheel spins about 2.46 times faster than the crank — so I'll set the crank's animation duration proportionally longer than the wheel's. I want the pedal platforms to counter-rotate against the crank arm so they stay level like real pedals, and I'll render the chain with a thick dark path overlaid with a lighter dashed stroke to mimic chain links. I should also add a soft ground shadow and a gradient backdrop for polish. For colors, I'm leaning toward a deep teal frame with tan saddle and grip accents plus chrome highlights, set against a warm cream background. Writing the SVG structure and gradient definitions... Adding a rotating dashed tread circle inside the tire, then working out the 18 spokes using rotated lines for a simpler wheel effect. Writing spoke transforms... Now I'm plotting out the frame geometry — bottom bracket, hubs, seat tube, head tube, and stem positions — checking that the tube connections between bottom bracket, top tube, and head tube line up correctly. Working through the head tube angle and fork geometry: the head tube runs from (498,186) to (520,246) at roughly 20° off vertical, which matches typical head angles. But when I extend the fork line to the front hub at (600,330), the resulting angle (~44° from vertical) is too slanted compared to the head tube direction, so the front hub position needs adjusting to keep the fork roughly parallel to the head tube with proper rake. Working through the scaling: with r=108px matching a 34cm wheel radius, that gives roughly 3.18px/cm, so the 55cm fork+head tube length becomes about 175px, putting the head tube top around (540,166) — but that seems too far right and high, so I need to account for fork rake pushing the hub forward of the steering axis by another 13-16px. Redefining coordinates: head tube top at (516,168), head tube bottom at (536,224) using the 60px length along the frame angle. Then checking the fork segment from head tube bottom to the front hub — a straight-line distance gives too steep an angle (31° from vertical), so I'm recalculating using the actual fork length (~130px) at an 18° angle plus rake offset to land correctly on the hub position. Working backward from the hub, I get head tube bottom around (541,213) and head tube top around (520,157). But that puts the handlebar area well above the wheel top, which actually makes sense geometrically since bars sit higher than the wheel — though it also implies the top tube runs nearly horizontal, meaning the seat tube top needs to sit at a similarly high position. Placing the seat tube at a 73° angle from the bottom bracket, I calculate its top point around (321,163), which keeps the top tube nearly level with the head tube top — consistent. The down tube length from BB to head tube bottom checks out around 205px, and the chainstay length from BB to rear hub comes out close to real-world proportions too. I'm now recalibrating scale: adjusting the rear and front hub positions to (230,335) and (590,335) with a wheel radius of 110px gives a pixel-to-cm ratio of about 3.24, producing a wheelbase near 111cm — a reasonable, if slightly long, geometry. Since exact realism matters less than visual plausibility, I'm just settling on final coordinates: hubs at (215,335) and (595,335), wheel radius 108, BB at (385,335), seat tube and head tube tops and bottoms placed to form a proportionate frame, with saddle and stem positioned above them and drop bars curving forward and down from the stem. Now I'm working out the fork curve, chainstay and seat stay connections, down tube and seat tube geometry, then computing the tangent line math for the chain wrapping around the chainring and rear cog based on their radii and center distance. Now I'm sketching the pedal shapes and moving to the drop-bar handlebars, curving the path forward from the stem then hooking down and back to form the classic drop shape, plus a small brake lever hanging off the hood area. Then I'm shaping the saddle as a forward-pointing nose shape sitting above the seatpost, narrowing toward the handlebar side and widening toward the rear. Adjusting saddle curve... Now I'm thinking about adding a rear derailleur with a small pulley near the hub, and dashed circle strokes for chainring teeth to keep the drivetrain subtle but detailed. I'm setting up the chainring and rear cog with dashed-stroke teeth, then assembling the full SVG with rotating wheel and crank groups plus an animated dashed overlay on the chain path to simulate movement. I need to make sure the chain speed matches the mechanics: wheel circumference (~679px) at 1.6s/rev gives ~424px/s, while the chainring (33px radius) turning once per 4s crank cycle produces a chain surface speed of ~52px/s, and I'm checking the rear cog's circumference too to keep everything visually consistent. Working out the dasharray/dashoffset animation so the chain speed lands close to 52px/s -- settling on a period of 10 with an offset animating to -50 over roughly 0.96s to keep the timing clean across wheel, crank, and chain. I'm adding a soft blurred shadow ellipse beneath the bike and setting up a warm cream-toned radial gradient background for depth, then starting the HTML document structure with the page setup and base styles. Writing the SVG frame gradient... Going with a teal-to-deep-blue gradient against the cream background, plus tan saddle and bar tape with chrome accents. For the frame sheen, I'll layer a thicker dark teal stroke with a thinner, lighter teal stroke offset slightly on top to fake a highlight. Since stroke-width isn't set on the group, it'll inherit correctly from the use element. For browser compatibility I'll add both href and xlink:href attributes with the xlink namespace declared, then map out the actual frame geometry: chainstay, seat stay, and seat tube paths connecting the bottom bracket, rear hub, and seat cluster points. Continuing the frame tube coordinates... Good, that confirms the head tube geometry is right with top rearward of bottom. Now I'm placing the steerer extension above the head tube and sketching the stem sloping slightly forward and down to reach the handlebar position, roughly above the front hub for a typical drop-bar setup. Sketching the drop bar curve... Adding rear derailleur details... I realize the chain's straight lower run won't perfectly align with the pulleys' positions, but that's an acceptable stylization rather than something worth fixing precisely. Now I'm calculating exact pulley placement so the chain line stays tangent to the top pulley, then adding a second pulley below it to complete the derailleur shape. I'll also add small chrome nuts on the front and rear hubs, then start building the crank and pedal group with a rotation animation, showing a lighter near crank arm and a darker, semi-transparent far crank arm for depth. Writing crank and pedal geometry... I'm working out the chainring with teeth and spider arms, then figuring out the drawing order so the chain sits behind the crank but above the rear wheel, with the frame layered appropriately relative to the chain runs. Writing tire and rim styling... Writing wheel tread and sidewall detail... Adding a soft shadow ellipse beneath the wheels to ground the bicycle, keeping everything else minimal without extra motion lines or captions — just the clean SVG illustration itself. Writing HTML structure... Working out the exact tube coordinates... Adding thicker head tube styling... Then I'll apply a slight offset translation to the tubes group for a sheen highlight along the upper-left edges, and start drawing the saddle shape with a tan color. I need the saddle to sit properly atop the seat post end near (317,141), so I'm repositioning the seat post to run from (330,170) up to (318,142) with the saddle bottom around y=142 to align them correctly. Now moving to the handlebar and tape, I'm defining the stem geometry extending from the steerer top around (517,153) to (551,153), connecting into the head tube path. Positioning the steerer tube along the head tube's angle, then routing the stem forward to the handlebars. I'm sketching a drop-bar curve from the stem point, plus a brake lever hanging off the bar's bend with a light gray finish. I'm layering the handlebar tape as a tan overlay on top of the dark base bar, drawing the base first then the tape stroke over the top section for a wrapped look, followed by the lever. I'm also considering adding a water bottle and cage on the down tube for extra character, positioning it around the midpoint of that tube. Skipping the bottle to keep the lines clean, I'm now designing the chainring's detail layer inside the rotating crank group, with a dashed outer ring for teeth, a solid inner ring, and cut-out shapes to give it a hollowed-out look, deciding on fill colors that blend with the background. Rather than actual holes, I'll build a lighter disc with darker spider arms radiating from a small center circle, plus the dashed teeth ring around the outside — this should read as a proper chainring without needing masking tricks. I'm sketching a similar smaller cog for the rear hub, with its own spin animation synced to the wheel. I need to work out the drawing order so the chain properly overlaps the cog and chainring teeth without looking wrong—wheel, cog, chain, derailleur, frame, then crank and chainring on top. Calculating tangent points... I'm computing where the derailleur pulleys sit along the lower chain run, placing the first pulley around (226, 358) with radius 7.5 and a second smaller pulley near (235, 378). I'm also weighing draw order — since the crank arm and chainring teeth sit on top, drawing the chain last risks it crossing visibly over the crank arm when the arm points right, so I need to decide whether the chain should be layered beneath the ring graphics instead. I realize I can duplicate the near crank arm into a separate group drawn after the chain, using the same 4-second rotation animation so it stays perfectly synced with the main crank arm underneath — solving the layering issue without breaking the animation. Nesting groups for safety, then setting up the pedal group's counter-rotation... Now I'm structuring the drivetrain layering so the far crank (rotated 180°, drawn behind the chainring) renders first, followed by the chainring, chain, and near crank, with the far pedal needing its own counter-rotation too. The pedal counter-rotates against the crank spin so it stays visually level, and since all animations start together at 4s durations they'll stay in phase. I'm also adding 20 spoke lines at 18° increments and a small valve stem rect on the rim that spins with the wheel for a nice detail before finalizing the HTML. I'm keeping the spinning wheels since a static bike with moving wheels reads well as "riding," and I'll add a tiny script checking `prefers-reduced-motion` to pause the SVG animations for accessibility rather than trying to disable SMIL via CSS. I'm working through the derailleur's position relative to the frame and chainstay, making sure it's drawn before the chain so the chain visually sits on top passing over the pulleys, plus adding a small fork crown detail. Writing SVG code... I'm second-guessing whether the gradient coordinate system will resolve correctly for the wheel's `` reference, so to avoid any rendering risk I decide to just use flat colors for the rim instead. Now I'm settling on a full color palette: dark tire and tread tones, light rim and hub shades, a teal frame gradient with a dark outline, warm saddle tape colors, and metallic drivetrain and chain tones. I decide to leave the SVG background transparent since the page already has its own gradient behind it. I'll add a faint ground shadow ellipse, generate the 18 spokes at even 18-degree intervals, and write out the full HTML page with the bicycle SVG and a soft radial gradient background behind it. Writing HTML and styles... Building the wheel spokes and rotation animation... Still writing SVG code... Checking that the top tube and down tube endpoints align properly against the head tube axis, verifying the offsets fall within the tube's width so the joints look clean. The fork position matches the head tube bottom, and the rear dropout point aligns where both chain stays and seat stay converge at the rear hub. Confirming the seat stay's top endpoint sits on the seat tube axis, then setting crank arm length and chainring radius before adding shadow ellipses beneath the wheels. I'll skip a separate ground line since the shadows already ground the bike, and decide against a caption to keep the image clean. Adding reduced-motion script and spoke lines... Skipping the front hub detail, I'm moving to the handlebar geometry now, working out the stem, steerer, bar curve, and tape paths as coordinate curves with appropriate stroke widths and dark colors. Adding the tape wrap texture with a dashed overlay, then placing the brake lever hood and blade as a simple curved path. I'll skip adding a rear brake and move on to finalizing everything, double-checking the dashed chain overlay. I'm working through the chain's motion direction — since the chainring turns clockwise for forward pedaling, the top chain run should move rightward from the rear cog toward the front ring. Working through the wheel rotation direction again: with forward motion and the front at the right, all wheels and the chainring spin clockwise, meaning the top of the chainring moves rightward. But that seems to put the chain moving away from the cog at the top, which doesn't match how the chain should connect them — so I need to reconsider where the driving tension side actually sits. Actually, tracing it through: the top run enters the ring from the rear tangent point and wraps over, while it's really the bottom run that flows leftward from ring to cog at the bottom, since that side moves in the -x direction for clockwise rotation. So the bottom run is what's pulling the cog along. Let me reset with proper math: using screen coordinates where y points down, increasing angle φ traces right→bottom→left→top, which is visually clockwise. Differentiating position gives the velocity direction at each point, so I can check what direction the top of a wheel moves under clockwise rotation. Confirming: at the top of a wheel, clockwise rotation makes that point move rightward (+x), matching forward rolling motion where the wheel's contact point stays still on the ground. Applying this to the cog and chainring, both rotate clockwise, so the top chain run connecting them also moves rightward, from the rear cog toward the front chainring. So the full loop makes sense: chain leaves the cog's top moving right, wraps over the top of the chainring, down its right side, back left along the bottom, and returns to wrap around the rear of the cog before climbing back to the top — both cog and ring spinning clockwise in a consistent cycle. Now I'm thinking about which side carries tension. Since the chainring drives the chain during forward pedaling, the top run should be the taut, tension side — that's the well-known behavior with the top run pulling and the bottom run staying slack through the derailleur. But tracing the direction more carefully causes a contradiction: if the chain travels from the cog up to the ring and back down to the cog, then leaves the ring at the bottom tangent, that would put the bottom run downstream and under tension instead — which conflicts with the known bike behavior. So my assumed direction of travel must be off, and I need to recheck how the top run actually moves on a real bike. Actually, I recall the derailleur's spring cage takes up slack on the lower run, which suggests the top run is the one under real tension while the bottom is slack, since the derailleur mechanism exists specifically to manage slack, not tension. The taut segment must be the one where the chain pulls the cog forward in its direction of rotation, so I need to trace the tangential force direction at the point of engagement. The chain leaves the cog at the top moving forward, toward the ring, while tension in that same segment pulls the cog's top forward (clockwise torque, driving the wheel) and simultaneously pulls the ring's top backward (counterclockwise torque, resisting the pedaling motion) — which matches how the chain transmits pedaling force to the wheel. Following the loop: the top run travels forward from cog to ring, wraps around the ring's front, then the bottom run travels backward from ring to cog. My chain path traces the top run in the +x direction, so to animate the dashes moving forward along that path I need to shift the stroke-dashoffset negatively over time. I confirm the same logic for the wheel, crank, and pedal rotations — clockwise spins use positive rotation values, and the counter-rotating pedal uses negative ones, all consistent with each other. Now I'm structuring the chain as a shared path definition reused with two overlaid strokes for the core and dashed overlay. I decide to skip animating via `` since inherited dashoffset animation is risky, and instead just write the chain path directly twice with explicit coordinates for safety. Writing chain path coordinates... Working through the arc angles, the clockwise sweep from bottom to top point is about 180.4°, just over half a circle, so the large-arc flag needs careful checking against the sweep direction to get the visual path right. Since the two points are again exactly a diameter apart, the circles coincide and both arcs are semicircles, so the large-arc flag doesn't matter and only sweep sets direction—matching the same pattern as the cog case, confirming clockwise wrap at the rear of the cog. Checking the chainring similarly: computing angles for its two tangent points around center (385,335) gives roughly 263.1° and 83.1°, and going clockwise from 263.1° up through 360°/0° to 83.1° traces the correct wrap. I verify the derailleur pulley positions against the lower chain run's slope, confirming the pulley at (226,358) sits right where the line passes, and note the small cage segment hanging from the dropout at (217,335). Now I'm ready to write out the full SVG with all these pieces, including the rotating rear cog animation. Now I'm working out the full draw order: shadows, wheels, spinning cog, derailleur, rotating crank and chainring, chain paths, then frame tubes and cockpit components, finishing with the near crank and pedal. I'm checking whether drawing the frame after the chain causes the chainstay to overlap it incorrectly. Tracing the seat tube's path from the bottom bracket up toward the seat, I'm calculating where it intersects the chain's top run — working through the coordinates shows they cross near one specific point, so I need to make sure the layering order doesn't create a visible clipping error there. Since the chain runs on the drive side and should appear over the seat tube in reality, I'm rethinking the draw order: shadows, wheels, rear cog, derailleur, far crank, then frame tubes, so the chain and chainring can layer correctly on top without the seat tube incorrectly covering them. But I realize the derailleur being drawn before the frame means the chainstay would cover part of its body near the dropout, which is wrong since the derailleur sits outboard of the chainstay — so I need to move the derailleur draw step to after the frame instead. I'm settling on a revised draw order: shadows, wheels, rear cog, far crank at low opacity, frame tubes and fork, seat post/saddle and steerer/stem/bars/lever, then derailleur, chainring, chain, and finally the near crank and pedals. Drawing the far crank at reduced opacity behind the frame is actually realistic since it's the leg on the opposite side, partly obscured by the seat and down tubes. Writing the SVG code... Here's a bicycle rendered as scalable vector art — drivetrain, spokes and all (the wheels, chain and cranks turn at properly geared speeds): ```html Bicycle — SVG

Bicycle

``` A few details worth noting: the wheels spin 2.5× faster than the cranks to match the 34/14-tooth gear ratio, the chain's highlight dashes travel forward along the taut upper run, and the pedals counter-rotate so they stay level like real platforms.

Make an SVG of a bicyle