Gerador Spirograph SVG

Spirograph: do brinquedo de 1965 à arte SVG paramétrica

O Spirograph foi inventado em 1965 pelo engenheiro britânico Denys Fisher e patenteado em 1966 — um conjunto de engrenagens plásticas com furos para caneta que permite traçar curvas matemáticas extremamente intrincadas no papel. Hoje pertence à Hasbro e já passou por milhões de lares, segmentos da Vila Sésamo e kits escolares de matemática mundo afora. Por trás da brincadeira existe geometria séria: toda forma que o Spirograph desenha é um hipotrocoide (quando uma roda menor rola dentro de um anel fixo maior) ou um epitrocoide (quando uma roda externa rola em torno de um círculo fixo), casos especiais das curvas roulette estudadas desde o século XVII.

A matemática por trás de cada curva

Três parâmetros definem toda a família: R = raio do círculo fixo, r = raio do círculo que rola, d = distância da caneta ao centro do círculo móvel. Para um hipotrocoide as equações paramétricas são:

x(t) = (R - r) * cos(t) + d * cos((R - r) / r * t)
y(t) = (R - r) * sin(t) - d * sin((R - r) / r * t)

Quando a razão R/r é racional (ex.: 5/3, 7/2, 96/35), a curva acaba se fechando sobre si mesma e forma uma roseta finita. Quando é irracional, o caminho nunca se repete — você obtém um spirograph "aberto" que, no limite, preenche densamente uma região anular. Os kits plásticos escolhem dentes (96, 84, 32 etc.) justamente para que toda razão seja racional e o desenho termine após um número previsível de voltas.

Construindo o path SVG

Um spirograph em SVG é apenas uma longa sequência de pontos (x, y) ligados por segmentos retos — visualmente indistinguíveis de uma curva suave a partir de ~500 pontos. O gerador itera t de 0 até 2π * lcm(R, r) / R, joga cada valor nas equações e emite um único <path d="M x0 y0 L x1 y1 L ...">. Para suavidade extra dá para interpolar com Béziers cúbicas (C), mas para tela 1000 segmentos retos já são pixel-perfect.

Cultura clássica, código moderno

Os padrões do spirograph viraram assinatura visual da pop art dos anos 60–70, dos pôsteres op art e das capas de disco psicodélicas. O designer alemão Anton Stankowski usou curvas roulette em identidades corporativas; hoje artistas computacionais como Jen Lewin as embutem em instalações de luz. Pedagogicamente, o brinquedo sobrevive como exercício de programação — implementar um spirograph em Python turtle, Processing ou p5.js é um ritual que ensina equações paramétricas, loops e transformações 2D numa única tarde.

Dicas de estilo

• Use stroke-dasharray + animação de stroke-dashoffset para "desenhar" a curva ao longo do tempo.
• Aplique gradiente sobrepondo vários paths com matizes diferentes e baixa opacidade.
• Mantenha o traço fino (0,5–1,5 px) — espessuras grossas borram as autointerseções.
• Centralize com viewBox dimensionado a 2(R + d) para não cortar nada.

Perguntas frequentes

Qual a aplicação prática de um spirograph? Além da arte decorativa, as equações ensinam curvas paramétricas, roulettes e razões racionais/irracionais — aparecem em engenharia mecânica (engrenamento de dentes), astronomia (modelos de epiciclos) e visualizações de processamento de sinais.

Razão simples sempre fecha a curva? Sim — sempre que R/r se reduz a uma fração p/q irredutível, a curva fecha após q voltas de t. Razões irracionais nunca fecham.

Quantos pontos preciso para um path suave? Cerca de 1000 amostras já dão resultado suave em telas comuns. Para impressão 4K, vá para 5000–10000 pontos ou troque para Béziers cúbicas.

É pesado renderizar? Não — um path SVG com 1000 pontos tem alguns kilobytes e renderiza em menos de um milissegundo. Animar stroke-dashoffset usa aceleração de GPU nos browsers modernos.