--- title: Spirograph Explorer: Hypotrochoid Curves in Canvas — Lab description: A browser-based recreation of the classic Spirograph toy uses three sliders to control a hypotrochoid parametric formula, drawing the resulting curve live on... canonical: https://daily.dev/posts/spirograph-explorer-hypotrochoid-curves-in-canvas-lab-ew2whpbb5 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Spirograph Explorer: Hypotrochoid Curves in Canvas — Lab | daily.dev og:description: A browser-based recreation of the classic Spirograph toy uses three sliders to control a hypotrochoid parametric formula, drawing the resulting curve live on... og:url: https://daily.dev/posts/spirograph-explorer-hypotrochoid-curves-in-canvas-lab-ew2whpbb5 og:image: https://api.daily.dev/og/posts/ew2WHpbB5.png og:image:alt: Spirograph Explorer: Hypotrochoid Curves in Canvas — Lab og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Spirograph Explorer: Hypotrochoid Curves in Canvas — Lab **[Creative Design Technologist](https://daily.dev/sources/carmenansio)** · [@carmenansio](https://daily.dev/carmenansio) · 2 min read · 5 upvotes · 0 comments ## Summary A browser-based recreation of the classic Spirograph toy uses three sliders to control a hypotrochoid parametric formula, drawing the resulting curve live on an HTML canvas. The write-up explains the math behind the gear-ratio variables R, r, and p, and notes why the number of revolutions needed to close the curve depends on the greatest common divisor of the two gear sizes. It also points out that CSS alone can't produce this kind of curve since calc() and trig functions compute single values, not point-by-point path generation, so canvas or SVG is required. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is the parametric equation for drawing a hypotrochoid curve like a Spirograph? A hypotrochoid curve is drawn with x = (R - r) * cos(t) + p * cos((R - r) / r * t) and y = (R - r) * sin(t) - p * sin((R - r) / r * t), where R and r are the two gear radii and p is how far off-center the pen sits in the smaller wheel. Sweeping t from 0 across enough revolutions traces the closed, repeating flower pattern of the classic Spirograph toy. _Developers experimenting with generative art formulas can find similar deep dives through daily.dev._ ### How many revolutions does a Spirograph curve need to close into a complete pattern? The number of revolutions required equals r divided by the greatest common divisor of R and r, where R and r are the two gear radii. When R and r share a large common factor, the flower closes after just a couple of loops; when they are coprime, it takes far more revolutions, producing denser, lacier patterns. _Anyone tuning generative curve parameters can keep discovering creative coding techniques via daily.dev._ ### Can CSS alone draw a spirograph or hypotrochoid curve without canvas or SVG? No, CSS cannot draw a hypotrochoid curve on its own. The calc() function and CSS trig functions can compute a single angle or offset value, but they cannot sample hundreds of points along a curve and connect them into a path, so producing a shape like this requires an actual loop via canvas or SVG path generation instead of a stylesheet. _Frontend developers weighing canvas versus CSS for a given visual effect can track these tradeoffs on daily.dev._ ## Similar posts on daily.dev - [M.C. Escher Print Gallery Shader](https://daily.dev/posts/m-c-escher-print-gallery-shader-8xhmulvgt) · Hacker News · 0 upvotes · 0 comments - [The mathematical beauty of hyperbezier curves](https://daily.dev/posts/the-mathematical-beauty-of-hyperbezier-curves-zyzursfmh) · Lobsters · 1 upvotes · 0 comments - [Making art with CSS gradients and corner-shape and skew, oh my](https://daily.dev/posts/making-art-with-css-gradients-and-corner-shape-and-skew-oh-my-mswlzgmp1) · Cassidy's blog · 40 upvotes · 0 comments - [The Kaleidoscope Is a Mirror Trick](https://daily.dev/posts/the-kaleidoscope-is-a-mirror-trick-tdlvm3wxs) · Creative Design Technologist · 7 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/spirograph-explorer-hypotrochoid-curves-in-canvas-lab-ew2whpbb5) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Spirograph Explorer: Hypotrochoid Curves in Canvas — Lab","url":"https://daily.dev/posts/spirograph-explorer-hypotrochoid-curves-in-canvas-lab-ew2whpbb5","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/spirograph-explorer-hypotrochoid-curves-in-canvas-lab-ew2whpbb5"},"datePublished":"2026-08-14T14:43:25.152Z","dateModified":"2026-09-13T21:00:18.037Z","description":"A browser-based recreation of the classic Spirograph toy uses three sliders to control a hypotrochoid parametric formula, drawing the resulting curve live on...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2e619bbc98b71f3ca5843a8493f32be1?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2e619bbc98b71f3ca5843a8493f32be1?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Creative Design Technologist","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Carmen Ansio","url":"https://daily.dev/carmenansio","image":"https://media.daily.dev/image/upload/s--Sl7WLCAs--/f_auto/v1723634130/avatars/avatar_3IJIxchf5","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":100}},"commentCount":0,"discussionUrl":"https://daily.dev/posts/spirograph-explorer-hypotrochoid-curves-in-canvas-lab-ew2whpbb5","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,css,creative-coding","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Creative Design Technologist","item":"https://daily.dev/sources/carmenansio"},{"@type":"ListItem","position":3,"name":"Spirograph Explorer: Hypotrochoid Curves in Canvas — Lab"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/spirograph-explorer-hypotrochoid-curves-in-canvas-lab-ew2whpbb5#faq","mainEntity":[{"@type":"Question","name":"What is the parametric equation for drawing a hypotrochoid curve like a Spirograph?","acceptedAnswer":{"@type":"Answer","text":"A hypotrochoid curve is drawn with x = (R - r) * cos(t) + p * cos((R - r) / r * t) and y = (R - r) * sin(t) - p * sin((R - r) / r * t), where R and r are the two gear radii and p is how far off-center the pen sits in the smaller wheel. Sweeping t from 0 across enough revolutions traces the closed, repeating flower pattern of the classic Spirograph toy. Developers experimenting with generative art formulas can find similar deep dives through daily.dev."}},{"@type":"Question","name":"How many revolutions does a Spirograph curve need to close into a complete pattern?","acceptedAnswer":{"@type":"Answer","text":"The number of revolutions required equals r divided by the greatest common divisor of R and r, where R and r are the two gear radii. When R and r share a large common factor, the flower closes after just a couple of loops; when they are coprime, it takes far more revolutions, producing denser, lacier patterns. Anyone tuning generative curve parameters can keep discovering creative coding techniques via daily.dev."}},{"@type":"Question","name":"Can CSS alone draw a spirograph or hypotrochoid curve without canvas or SVG?","acceptedAnswer":{"@type":"Answer","text":"No, CSS cannot draw a hypotrochoid curve on its own. The calc() function and CSS trig functions can compute a single angle or offset value, but they cannot sample hundreds of points along a curve and connect them into a path, so producing a shape like this requires an actual loop via canvas or SVG path generation instead of a stylesheet. Frontend developers weighing canvas versus CSS for a given visual effect can track these tradeoffs on daily.dev."}}]} ```