Gallery — Mathematical Art

18 topics · 355 interactive pages — every card below is a live snapshot of the real page. Click any card to open the full visualization.

Spirographs & Rolling Curves

Epitrochoids, hypotrochoids and other rolling-circle curves — the classic spirograph family, from simple loops to multi-wheel explorers.

Open

Cardioid Shape

Fig. 1 · cardiod.html

Open

Cardioid Shape

Fig. 2 · cardiod_line.html

Open

Cardioid Shape with Point Labels

Fig. 3 · cardiod_line1.html

Open

Cardioid Shape with Point Labels

Fig. 4 · cardiod_line2.html

Open

Animated Cardioid Shape with Point Labels

Fig. 5 · cardiod_line3.html

Open

Animated Cardioid Shape with Point Labels

Fig. 6 · cardiod_line4.html

Open

Dynamic Complex Line Drawing

Rotating

Fig. 7 · double_circle_rotating.html

Open

Hypotrochoid Curves

Fig. 8 · double_hypotrochoid.html

Open

Composite Hypotrochoid Curves

Interactive

Fig. 9 · double_hypotrochoid_explore.html

Open

Hypotrochoid Curves with Rotation and Offset Control

InteractiveMotion

Fig. 10 · double_hypotrochoid_moving_offset_explore.html

Open

Hypotrochoid Curves with Slow Rotation

Rotating

Fig. 11 · double_hypotrochoid_rotating.html

Open

Hypotrochoid Curves with Slow Rotation and Offset Control

InteractiveRotating

Fig. 12 · double_hypotrochoid_rotating_offset_explore.html

Open

Dynamic Complex Line Drawing

Fig. 13 · double_motion.html

Open

Dynamic Complex Line Drawing

Color

Fig. 14 · double_motion_color.html

Open

Dynamic Complex Line Drawing

Interactive

Fig. 15 · double_motion_explore.html

Open

Moving Circles with Complex Line Drawing

Motion

Fig. 16 · double_moving2.html

Open

Polygon Animation

Interactive

Fig. 17 · double_ngon_explore.html

Open

Pentagon Animation

Fig. 18 · double_pentagon.html

Open

Rotating Polygons with Connections

Fig. 19 · double_polygon_double_rotation.html

Open

Rotating Perpendicular Rings in 3D

Rotating

Fig. 20 · double_ring_rotate.html

Open

Rotating Perpendicular Rings in 3D

Rotating

Fig. 21 · double_ring_rotate_line.html

Open

Rotating Perpendicular Rings in 3D

RotatingColor

Fig. 22 · double_ring_rotate_line_color.html

Open

Double Squares

Fig. 23 · double_square.html

Open

Triangle Animation

Fig. 24 · double_square1.html

Open

Square Animation

Rotating

Fig. 25 · double_square_line_rotate.html

Open

Triangle Animation

Fig. 26 · double_triangle.html

Open

Triangle Animation

Fig. 27 · double_triangle1.html

Open

Animated Sinusoidal Wave on Ellipse

InteractiveMotionColor

Fig. 28 · ellipse_double_sinusoidal_moving_color_background_explore.html

Open

Tangential Ellipse on Circle (One Contact Point)

Rotating

Fig. 29 · ellipse_rotating_circle.html

Open

Tangential Ellipse on Circle

Rotating

Fig. 30 · ellipse_rotating_circle_line.html

Open

Rotating Ellipse on Circle

Rotating

Fig. 31 · ellipse_superrotating_circle.html

Open

Epicycloid Curves with Scrollbars, Labels, and Color Picker

Interactive

Fig. 32 · epicycloid_add_epicycloid_explore.html

Open

Epicycloid Curves with Scrollbars, Labels, and Color Picker

InteractiveSave PNG

Fig. 33 · epicycloid_explore_savepng.html

Open

Epicycloid Curves with Scrollbars, Labels, and Color Picker

InteractiveSave PNG

Fig. 34 · epicycloid_variant_explore_savepng.html

Open

Epitrochoid (v2) Curves with Scrollbars, Labels, and Color Picker

Interactive

Fig. 35 · epitrochoid2_explore.html

Open

Epitrochoid (v1) Curves with Scrollbars, Labels, and Color Picker

Interactive

Fig. 36 · epitrochoid_explore.html

Open

Figure of 8 using Polar Coordinates with Rotating Wheel

Fig. 37 · figure_eight_double_wheel.html

Open

Hypotrochoid Curves with Scrollbars, Labels, and Color Picker

Interactive

Fig. 38 · hypocycloid_explore.html

Open

Hypotrochoid Curves

Fig. 39 · hypotrochoid.html

Open

Hypotrochoid Curves

Animated

Fig. 40 · hypotrochoid_animate_d.html

Open

Hypotrochoid Curves

Animated

Fig. 41 · hypotrochoid_animate_d1.html

Open

Hypotrochoid Curves

Animated

Fig. 42 · hypotrochoid_animated.html

Open

Hypotrochoid Curves

AnimatedRotatingColor

Fig. 43 · hypotrochoid_animated_rotate_color.html

Open

Hypotrochoid Curves

AnimatedRotating

Fig. 44 · hypotrochoid_animated_rotate_d.html

Open

Hypotrochoid Curves

AnimatedRotating

Fig. 45 · hypotrochoid_animated_rotate_hex.html

Open

Hypotrochoid Curves

AnimatedRotating

Fig. 46 · hypotrochoid_animated_rotate_pentagon.html

Open

Hypotrochoid Curves with Scrollbars, Labels, and Color Picker

Interactive

Fig. 47 · hypotrochoid_explore.html

Open

Hypotrochoid Curves with Scrollbars, Labels, and Color Picker

InteractiveSave PNG

Fig. 48 · hypotrochoid_explore_savepng.html

Open

Hypotrochoid Curves

AnimatedRotating

Fig. 49 · hypotrochoid_rotate5_animated.html

Open

Hypotrochoid Curve with Additional Scrollbars

Interactive

Fig. 50 · hypotrochoidv3_explore.html

Open

Epicycloid Curves with Petal with Scrollbars, Labels, and Color Picker

Interactive

Fig. 51 · petal_add_epicycloid_explore.html

Open

Rotating Cardioid Shape

Rotating

Fig. 52 · rotating_cardiod2.html

Open

Rotating Cardioid Shape with Point Labels

Rotating

Fig. 53 · rotating_cardiod_line4.html

Open

Rotating Circle Shape

Rotating

Fig. 54 · rotating_circle.html

Open

Rotating Circle Shape

AnimatedRotating

Fig. 55 · rotating_circle1_animated.html

Open

Dynamic Circles with Red-to-Blue Gradient

AnimatedRotating

Fig. 56 · rotating_circle_animated.html

Open

Circle Rotation Contour

Fig. 57 · spirograph.html

Open

Circle Rotating Around a Circle Contour with Trail

Interactive

Fig. 58 · spirograph_ellipse_explore.html

Open

Circle Rotating Around a Circle Contour with Trail

Interactive

Fig. 59 · spirograph_explore.html

Open

Contour of Rolling Circle

Fig. 60 · spirograph_outline.html

Open

Circle Rotating Around a Circle Contour with Trail

Interactive

Fig. 61 · spirograph_spirograph_explore.html

Open

Dynamic Complex Line Drawing

Fig. 62 · triple_motion.html

Open

Rotating Perpendicular Rings in 3D

Rotating

Fig. 63 · triple_ring_rotate_line.html

Open

Dynamic Circles with Red-to-Blue Gradient

AnimatedRotating

Fig. 64 · triple_rotating_circle_animated.html

Lemniscates & Figure-Eights

The lemniscate family — figure-eight curves radiating, rotating and multiplying.

Open

Figure of 8 using Polar Coordinates

Fig. 1 · figure_eight.html

Open

Figure of 8 using Polar Coordinates

Fig. 2 · figure_eight_double.html

Open

Figure of 8 using Polar Coordinates

Fig. 3 · figure_eight_fifth.html

Open

Animating Figure of 8

Fig. 4 · figure_eight_radiating.html

Open

Figure of 8 with Growing Lobes

Fig. 5 · figure_eight_radiating_fixed.html

Open

Animated Rotating Figure of 8

Rotating

Fig. 6 · figure_eight_rotating.html

Open

Figure of 8 using Polar Coordinates

Fig. 7 · figure_eight_third.html

Open

Rotating Lemniscate

Fig. 8 · lemniscate.html

Open

Figure of 8 using Polar Coordinates

Fig. 9 · lemniscate2_fixed.html

Open

Animated Lemniscate with Growing and Shrinking Lobes

Fig. 10 · lemniscate2_radiating.html

Open

Rotating Lemniscate

Rotating

Fig. 11 · lemniscate2_rotate.html

Open

Rotating Lemniscate

Rotating

Fig. 12 · lemniscate3_rotate.html

Open

Animated Lemniscate with Growing and Shrinking Lobes

Fig. 13 · lemniscate5_radiating.html

Open

Rotating Lemniscate

Rotating

Fig. 14 · lemniscate5_rotate.html

Open

Animated Lemniscate with Growing and Shrinking Lobes

Fig. 15 · lemniscate6_radiating.html

Open

Rotating Lemniscate

Rotating

Fig. 16 · lemniscate6_rotate.html

Open

Animated Lemniscate with Growing and Shrinking Lobes

Fig. 17 · lemniscate8_radiating.html

Open

Animated Lemniscate with Growing and Shrinking Lobes

Fig. 18 · lemniscate_radiating.html

Open

Rotating Lemniscate

Random

Fig. 19 · lemniscate_random.html

Open

Rotating Lemniscates

Rotating

Fig. 20 · lemniscate_rotating_four.html

Chasing & Rotating Polygons

Polygons chasing their own vertices, auto-rotating frames and polygons spinning around polygons in endless pursuit.

Open

Pentagon Drawing with Iterations

Fig. 1 · chasing_3gon.html

Open

Pentagon Rotation and Translation

Fig. 2 · chasing_3gon_around_3gon.html

Open

Pentagon Drawing with Iterations

Fig. 3 · chasing_4gon.html

Open

Pentagon Rotation and Translation

Fig. 4 · chasing_4gon_around_4gon.html

Open

Pentagon Rotation and Translation

Fig. 5 · chasing_5gon_around_5gon.html

Open

Chasing hexagon around hexagon

Fig. 6 · chasing_6gon_around_6gon.html

Open

Chasing hexagon around hexagon

MotionColor

Fig. 7 · chasing_6gon_around_6gon_moving_color.html

Open

Interactive Circle Line Drawing with Dynamic Points

Fig. 8 · chasing_circle.html

Open

Diamond Rotation and Translation

Fig. 9 · chasing_diamond_around_diamond.html

Open

Pentagon Drawing with Iterations

Fig. 10 · chasing_hexagon.html

Open

Pentagon Drawing with Iterations

Rotating

Fig. 11 · chasing_hexagon_rotating.html

Open

Chasing lines and special effects of running color

Fig. 12 · chasing_lines_and_running_colour_hexagon.html

Open

Chasing lines on rotating hexagon

Fig. 13 · chasing_lines_on_hexagon.html

Open

Polygon Drawing with Iterations

InteractiveRotating

Fig. 14 · chasing_ngon_rotating_explore.html

Open

Pentagon Drawing with Iterations

Fig. 15 · chasing_pentagon.html

Open

Pentagon Drawing with Iterations

Rotating

Fig. 16 · chasing_pentagon_rotating.html

Open

Pentagon Drawing with Iterations

Fig. 17 · chasing_square.html

Open

Pentagon Drawing with Iterations

Rotating

Fig. 18 · chasing_square_rotating.html

Open

Pentagon Drawing with Iterations

Fig. 19 · chasing_triangle.html

Open

Pentagon Drawing with Iterations

Rotating

Fig. 20 · chasing_triangle_rotating.html

Open

Pentagon Rotation Animation

Rotating

Fig. 21 · hexagon_auto_rotate.html

Open

Hexagon with Colored Lines

Template

Fig. 22 · hexagon_chasing_template.html

Open

Animated Expanding and Contracting Squares

Motion

Fig. 23 · moving_square.html

Open

Animated Expanding and Rotating Square

RotatingMotion

Fig. 24 · moving_square_rotate.html

Open

Animated Expanding and Rotating Squares

RotatingMotion

Fig. 25 · moving_square_rotate_double.html

Open

Pentagon Rotation Animation

Rotating

Fig. 26 · octagon_auto_rotate.html

Open

Pentagon Rotation Animation

Rotating

Fig. 27 · pentagon_auto_rotate.html

Open

Pentagon with Colored Lines

Template

Fig. 28 · pentagon_chasing_template.html

Open

Pentagon with Animated Colored Lines

Template

Fig. 29 · pentagon_chasing_template1.html

Open

Pentagon with Animated Colored Lines

Template

Fig. 30 · pentagon_chasing_template2.html

Open

Pentagon with Animated Colored Lines

Template

Fig. 31 · pentagon_chasing_template3.html

Open

Pentagon with Touching Pentagons

Fig. 32 · pentapentagon.html

Open

Rotating Growing Polygon with Red to Blue Gradient

Rotating

Fig. 33 · rotated_ngon.html

Open

Rotating Polygon Drawer

Rotating

Fig. 34 · rotated_polygon.html

Open

Rotating Growing Triangles with Color Gradient

Rotating

Fig. 35 · rotated_triangle.html

Open

Rotating Growing Polygon with Blue to Red Gradient

Rotating

Fig. 36 · rotated_triangle1.html

Open

Pentagon Drawing with Iterations

Rotating

Fig. 37 · rotating_chasing_3gon.html

Open

Rotating Diamond

Rotating

Fig. 38 · rotating_diamond.html

Open

Pentagon with Touching Pentagons

Rotating

Fig. 39 · rotating_pentagon_about_pentagon.html

Open

Random Rotating Polygon Drawer

Rotating

Fig. 40 · rotating_polygons.html

Open

Random Rotating Polygon Drawer

Rotating

Fig. 41 · rotating_polygons_duo.html

Open

Random Rotating Polygon Drawer

Rotating

Fig. 42 · rotating_polygons_opposite.html

Open

Random Rotating Polygon Drawer

Rotating

Fig. 43 · rotating_polygons_opposite_30canvas.html

Open

Random Rotating Polygon Drawer

Rotating

Fig. 44 · rotating_polygons_opposite_fixed.html

Open

Random Rotating Polygon Drawer

Rotating

Fig. 45 · rotating_polygons_quarter.html

Open

Random Rotating Polygon Drawer

Rotating

Fig. 46 · rotating_polygons_tri.html

Open

Pentagon Rotation Animation

Rotating

Fig. 47 · square_auto_rotate.html

Open

Square with Colored Lines

Interactive

Fig. 48 · square_chasing_explore.html

Open

Square with Colored Lines

Template

Fig. 49 · square_chasing_template.html

Open

Pentagon Rotation Animation

Rotating

Fig. 50 · triangle_auto_rotate.html

Open

Triangle with Colored Lines

Template

Fig. 51 · triangle_chasing_template.html

Open

Triangle with Colored Lines

Template

Fig. 52 · triangle_chasing_template1.html

Polygons Around Polygons

Regular polygons inscribed around other polygons, layered into rings of rotating symmetry.

Open

Triangle rotation and translation

Fig. 1 · 3gon_around_3gon.html

Open

Triangle Rotation and Translation

Animated

Fig. 2 · 3gon_around_3gon_animated.html

Open

Triangle Rotation and Translation

AnimatedColor

Fig. 3 · 3gon_around_3gon_animated_color.html

Open

Square Rotation and Translation

Fig. 4 · 4gon_around_4gon.html

Open

Square Rotation and Translation

Animated

Fig. 5 · 4gon_around_4gon_animated.html

Open

Square Rotation and Translation

Rotating

Fig. 6 · 4gon_around_4gon_rotating.html

Open

Pentagon Rotation and Translation

Fig. 7 · hexagon_around_hexagon.html

Open

Pentagon Rotation and Translation

Fig. 8 · pentagon_around_pentagon.html

Open

Pentagon Rotation and Translation

Animated

Fig. 9 · pentagon_around_pentagon_animated.html

Open

Pentagon Rotation and Translation

AnimatedColor

Fig. 10 · pentagon_around_pentagon_animated_color.html

Fractals

Self-similar geometry: ferns, dragon curves, Mandelbrot and Julia sets, Koch snowflakes, Sierpinski carpets and more.

Open

Barnsley Fern (Affine Fractal)

Fig. 1 · barnsley_fern_fractal.html

Open

Dragon Curve

Fig. 2 · dragon_curve.html

Open

Dragon Curve Animation

Animated

Fig. 3 · dragon_curve_animated.html

Open

Fractal Fern

Fig. 4 · fractal_fern.html

Open

Vicsek Fractal - Randomized Colors

Fig. 5 · generalized_vicsek_fractal_multiple.html

Open

Hexaflake Fractal Animation

Fig. 6 · hexaflake.html

Open

Hilbert Curve

Fig. 7 · hilbert_curve.html

Open

Julia Set

Fig. 8 · julia_set.html

Open

Koch Snowflake

Fig. 9 · koch_snowflake.html

Open

Koch Snowflake Orders

Fig. 10 · koch_snowflake_multiple.html

Open

Mandelbrot Set

Fig. 11 · mandelbrot.html

Open

Mandelbrot Set with Color Gradient

Color

Fig. 12 · mandelbrot_color.html

Open

Mandelbrot Set with Zoom

Fig. 13 · mandelbrot_mouse.html

Open

Menger Sponge

Animated

Fig. 14 · menger_sponge_animated.html

Open

Pythagorean Tree Generator

Interactive

Fig. 15 · pythagorean_tree_explore.html

Open

Sierpinski Triangle

Fig. 16 · sierpinski.html

Open

Sierpinski Carpet

Fig. 17 · sierpinski_carpet.html

Open

T-Square Fractal with High Contrast

Fig. 18 · t_square_fractal2.html

Open

T-Square Fractal with Color Gradient Animation

Fig. 19 · t_square_fractal_animation.html

Open

Vicsek Fractal

Fig. 20 · vicsek_fractal.html

Open

Vicsek Fractal Animation

Animated

Fig. 21 · vicsek_fractal_animate.html

Open

Vicsek Fractal - Orders 0 to 5

Fig. 22 · vicsek_fractal_multiple.html

Open

Mandelbrot Zoom Animation

Fig. 23 · zooming_mandelbrot.html

3D Surfaces & Solids

Three-dimensional geometry: minimal surfaces, Klein bottles, tori, Platonic solids, Möbius strips and tessellations.

Open

Möbius Strip Wireframe with Gradient

Manual

Fig. 1 · clickme_mobius_manual1.html

Open

Dodecahedron Line Graphics

Fig. 2 · dodecahedron.html

Open

Dodecahedron Line Graphics

Fig. 3 · dodecahedron_fixed.html

Open

Dodecahedron Line Graphics

Fig. 4 · dodecahedron_nolabel.html

Open

Enneper Surface

Fig. 5 · enneper.html

Open

Enneper Surface Animation

Fig. 6 · enneper_animation.html

Open

Rotating Enneper Surface

Rotating

Fig. 7 · enneper_rotating.html

Open

Dynamic Enneper Surface

Rotating

Fig. 8 · enneper_rotating1.html

Open

Hexagon Circle Tessellation

Fig. 9 · hexagon_tessellation.html

Open

Icosahedron Wireframe

Fig. 10 · icosahedron.html

Open

Icosahedron Wireframe with Centroids

Fig. 11 · icosahedron_centroid.html

Open

Icosahedron Wireframe with Labels

Fig. 12 · icosahedron_labelled.html

Open

Icosahedron with Centroid Lines

Fig. 13 · icosahedron_surface.html

Open

Klein Bottle Line Drawing

Fig. 14 · klein2_animation.html

Open

Klein Bottle Line Drawing

Fig. 15 · klein2_animation2.html

Open

Klein Bottle Line Drawing

Fig. 16 · klein2_animation3.html

Open

Klein Bottle Wireframe

Fig. 17 · klein3.html

Open

Klein Bottle Visualization

Fig. 18 · klein_bottle.html

Open

Möbius Strip Wireframe

Fig. 19 · mobius.html

Open

Möbius Strip Wireframe

Manual

Fig. 20 · mobius_manual.html

Open

Möbius Strip Wireframe with Auto Rotation

RotatingManual

Fig. 21 · mobius_manual_rotating.html

Open

Möbius Strip Wireframe Animation

Fig. 22 · mobius_radiating.html

Open

Resizable Rhombic Dodecahedron

Fig. 23 · rhombicDodecahedron.html

Open

Rhombic Icosahedron — Random Tumble

Fig. 24 · rhombicIcosahedron.html

Open

Rotating Rhombic Icosahedron

Rotating

Fig. 25 · rotating_rhombic_icosahedron.html

Open

Cardioid Shape

Interactive

Fig. 26 · sinusoidal_on_sphere_explore.html

Open

3D Wireframe Shapes with Three.js

Fig. 27 · solid_torus.html

Open

Sphere Triangulation

Fig. 28 · sphere.html

Open

Sinusoidal Waves Around a Sphere with Perspective Control

Fig. 29 · spherical_sinusoid.html

Open

Sinusoidal Waves Around a Sphere with Perspective Control

Fig. 30 · spherical_sinusoid1.html

Open

Sinusoidal Waves Around a Sphere (Side View)

Fig. 31 · spherical_sinusoid3.html

Open

Rotating Gradient Background

Fig. 32 · spherical_tessellation.html

Open

Sphere Tessellation with Hexagons

Fig. 33 · spherical_tessellation_hexagon.html

Open

Triangle Animation

Fig. 34 · square_sphere.html

Open

Klein Bottle Transformation

Fig. 35 · torus.html

Open

Dynamic 3D Spiral Surface - WebGL

Fig. 36 · torus2.html

Open

Dynamic 3D Spiral Surface with Random Rotation - WebGL

Rotating

Fig. 37 · torus2_rotating.html

Open

Truncated Dodecahedron Line Graphics

Fig. 38 · truncated_dodecahedron_one_corner.html

Minimal Surfaces

Soap-film-like minimal surfaces and their immersions — Boy's surface and other zero-mean-curvature forms rendered as interactive meshes.

Open

Interactive Boy's Surface

Interactive

Fig. 1 · interactive_boy_surface.html

Open

Interactive Boy's Surface — Gradient Mesh

InteractiveGradient

Fig. 2 · interactive_boy_surface_gradient_mesh.html

Waves & Oscillations

Sine waves, square waves and sinusoidal ribbons — oscillation drawn in animated color.

Open

Animated Sinusoidal Wave on Ellipse

InteractiveMotionColor

Fig. 1 · ellipse_fract_sinusoidal_moving_color_background_explore.html

Open

Animated Sinusoidal Wave on Ellipse

InteractiveMotionColor

Fig. 2 · ellipse_sinusoidal_moving_color_background_explore.html

Open

Animated Sinusoidal Wave on Circle

InteractiveMotionColor

Fig. 3 · sine_sinusoidal_moving_color_background_explore.html

Open

Traveling Sine Wave

Fig. 4 · sinewave.html

Open

Sine Wave Animation

Animated

Fig. 5 · sinewave_animated.html

Open

Revolving Sine Wave

Fig. 6 · sinewave_circle.html

Open

Traveling Sine Wave

Fig. 7 · sinewave_root.html

Open

Traveling Sine Wave

Fig. 8 · sinewave_root_multiple.html

Open

Sinusoidal Wave Animation

Fig. 9 · sinsoidal5.html

Open

Sinusoidal Wave Animation

Fig. 10 · sinusoidal.html

Open

Animated 3D Sine Waves

Fig. 11 · sinusoidal_plane.html

Open

SquarishSine Curves

Fig. 12 · square_sine.html

Open

Hypotrochoid Curves

Animated

Fig. 13 · square_sine_animated.html

Open

Square Wave Approximation with Fourier Series

Fig. 14 · squarewave.html

Open

Sine Wave Animation

Animated

Fig. 15 · squarewave_animated.html

Open

Revolving Square Wave with Fourier Series

Rotating

Fig. 16 · squarewave_revolving.html

Open

Sinusoidal Wave on Triangle Edges

Interactive

Fig. 17 · triangle_sinusoidal_explore.html

Open

Animated Sinusoidal Wave on Triangle Edges with Background Color Morph

InteractiveMotionColor

Fig. 18 · triangle_sinusoidal_moving_color_background_explore.html

Open

Animated Sinusoidal Wave on Triangle Edges with Color Gradient

InteractiveMotionColor

Fig. 19 · triangle_sinusoidal_moving_color_explore.html

Open

Wavy Lines

Fig. 20 · wavylines.html

Open

Wavy Lines (v2)

Fig. 21 · wavylines2.html

Hearts & Valentine

Heart-shaped curves and clickable valentine games.

Open

Heart-shaped Line Art

Fig. 1 · heart3.html

Open

Heart-shaped Line Art

Fig. 2 · heart4.html

Open

Heart-shaped Line Art

Fig. 3 · heart5.html

Open

Heart-shaped Line Art

Fig. 5 · heart_click_game.html

Open

Heart Clicker Game

Game

Fig. 6 · heart_click_game2.html

Open

Hearts Mouse Follower

Fig. 7 · valentine.html

Open

Floating Hearts

Fig. 8 · valentine2.html

Games & Simulations

Interactive games and simulations, from clicking hearts to Conway's Game of Life.

Open

Claude Game Touch

Game

Fig. 1 · claude_game_touch.html

Open

Game of Life

Fig. 2 · conway.html

Ellipses & Ovals

Ellipses in motion: rotating, sliding and super-rotating ovals and the line art drawn across them.

Open

Dynamic Ellipse Connection

Fig. 1 · double_ellipse.html

Open

Tangential Ellipse Animation

Fig. 2 · ellipse_sliding_circle.html

Open

Tangential Ellipse with Lines

Fig. 3 · ellipse_sliding_circle_with_line.html

Open

Ellipse Animation

Fig. 4 · ellipsical_line.html

Open

Ellipse Animation

Rotating

Fig. 5 · ellipsical_line_rotate.html

Open

Rotating Ellipse

Rotating

Fig. 6 · rotating_ellipse.html

Open

Rotating and Shrinking Ellipse

Rotating

Fig. 7 · rotating_ellipse4.html

Open

Rotating and Shrinking Ellipse

Rotating

Fig. 8 · rotating_ellipse5.html

Open

Rotating and Shrinking Ellipse

Rotating

Fig. 9 · rotating_ellipse6.html

Open

Rotating and Shrinking Ellipse

Rotating

Fig. 10 · rotating_ellipse7.html

Open

Rotating Ellipse

Rotating

Fig. 11 · rotating_ellipse_group.html

Open

Rotating Ellipse

RotatingColor

Fig. 12 · rotating_ellipse_group_color.html

Open

Two Ellipse Lines Animation

Fig. 13 · two_ellipse.html

Petals & Flowers

Flower-like curves built from rotated petals, from simple blossoms to complex multi-petal motion.

Open

Dynamic Complex Line Drawing

Fig. 1 · flower_in_motion.html

Open

Four-Petal Shape Animation

Fig. 2 · four_petal.html

Open

Four Petal Lines Animation

Fig. 3 · four_petal_double.html

Open

Four Petal Lines Animation

Rotating

Fig. 4 · four_petal_rotate.html

Open

Dynamic Petals with Red-to-Blue Gradient

AnimatedRotating

Fig. 5 · rotating_petal_animated.html

Open

Dynamic Petals with Red-to-Blue Gradient

Animated

Fig. 6 · simple_petal_animated.html

Open

Dynamic Petals with Red-to-Blue Gradient

Fig. 7 · simple_petal_line.html

Open

Dynamic Petals with Red-Blue-Yellow Gradient

Color

Fig. 8 · simple_petal_line_color.html

Open

Three Petal Shape Animation

Fig. 9 · three_petal.html

Open

Two-Petal Shape Animation

Fig. 10 · two_petal.html

Open

Variable Petal Lines Animation

Rotating

Fig. 11 · variable_fraction_npoint_petal_rotate.html

Open

Variable Petal Lines Animation

Rotating

Fig. 12 · variable_fraction_petal_rotate.html

Open

Variable Petal Lines Animation

Rotating

Fig. 13 · variable_petal_rotate.html

Spirals & Islamic Patterns

Spirals, vortexes and Islamic geometric star patterns in rotation.

Open

Islamic Spiral Design

Fig. 1 · islamic_spiral.html

Open

Islamic Spiral Design

Fig. 2 · islamic_spiral2.html

Open

Rotating Islamic Spiral Design

Rotating

Fig. 3 · rotating_islamic_spiral.html

Open

Rotating spiral

Rotating

Fig. 4 · rotating_spiral.html

Rotating Spiral with Color Lines

Rotating

Fig. 6 · spiral3_rotating.html

Open

Spiral with Rotating Colors

Fig. 7 · spiral4.html

Open

Spiral with Rotating Colors

Fig. 8 · spiral_triangle.html

Open

3D Spiral Tube with Pulsating Length

Fig. 9 · spiral_tube.html

Open

3D Spiral Tube with Adjustable Radius

Interactive

Fig. 10 · spiral_tube_explore.html

Open

Vortex Parametric Equation Visualization

Interactive

Fig. 11 · vortex2_explore.html

Open

Vortex Parametric Equation Visualization

Interactive

Fig. 12 · vortex_explore.html

Line Art & Sectors

Line drawings across polygon vertices, spokes and randomized sectors — polygonal scribble art.

Open

Canvas Pattern

Rotating

Fig. 1 · counter_rotating_sector.html

Open

Diamond Shape with Randomized nnn

Random

Fig. 2 · diamond4_random_sector.html

Open

Diamond Shape with Randomized nnn

Random

Fig. 3 · diamond4_random_sector_translate.html

Open

Sector of a Circle

Fig. 4 · drawsector.html

Open

Diamond Shape with Randomized nnn

Random

Fig. 5 · five_edged_random_sector.html

Open

Five rotating spoke

Rotating

Fig. 6 · five_rotate_spoke.html

Open

Five rotating sector

Rotating

Fig. 7 · five_rotate_spoke_sector.html

Open

Diamond Shape with Randomized nnn

Random

Fig. 8 · four_edged_random_sector.html

Open

Hexagon Animation

Rotating

Fig. 9 · hexagon_line_rotate.html

Open

Geometric Line Drawing

Fig. 10 · line_drawing.html

Open

Pentagon Animation

Rotating

Fig. 11 · pentagon_line_rotate.html

Open

Pentagon Animation

RotatingGradient

Fig. 12 · pentagon_line_rotate_gradient.html

Open

Rotating sector

Rotating

Fig. 13 · rotating_sector.html

Open

Rotating spoke

Rotating

Fig. 14 · rotating_spoke.html

Open

Square Animation

Rotating

Fig. 15 · square_line_rotate.html

Open

Diamond Shape with Randomized nnn

Random

Fig. 16 · three_edged_random_sector.html

Open

Triangle Animation

Rotating

Fig. 17 · triangle_line_rotate.html

Circles & Concentric Rings

Circles on circles, concentric rings and polar-coordinate drawings.

Circle Spokes with Different Colors

Color

Fig. 2 · circle_color.html

Open

Heart-shaped Line Art

Fig. 3 · circle_cycle.html

Open

Draw Circles with Polar Coordinates

Fig. 4 · clickme_circle_on_circle.html

Open

Canvas Pattern

Fig. 5 · concentric.html

Open

Hexagon with Circles

Fig. 6 · hexagon_circle.html

Open

Hexagon with Pulsating Circles

Fig. 7 · hexagon_circle_full.html

Open

Canvas Pattern

Fig. 8 · static_concentric.html

Shapes & Curiosities

Diamonds, windmills, boomerangs, turtle graphics, parametric patterns and other geometric curiosities.

Open

Boomerang Curves

Fig. 1 · boomerang.html

Open

Polygon Animation

Interactive

Fig. 2 · chopstick_explore.html

Diamond Shape with Labels

Fig. 4 · diamond2.html

Open

Diamond Shape with Labels

Fig. 5 · diamond3.html

Open

Dynamic Diamond Drawing

Animated

Fig. 6 · diamond3_animate.html

Open

Diamond Shape with Labels

Fig. 7 · diamond4.html

Open

Diamond Shape Drawing

Animated

Fig. 8 · diamond4_animated.html

Open

Diamond Shape with Labels

Fig. 9 · diamond4_translate.html

Open

Radial Symmetry Animated Diamonds

Fig. 10 · diamond6.html

Open

Diamond Shape with Randomized Angles

Animated

Fig. 11 · diamond_generalized_animate.html

Open

Diamond Shape with Labels

Fig. 12 · diamond_label.html

Open

Parametric Equation Visualization

Fig. 13 · parametric_curve1.html

Open

Parametric Equation Visualization with Gradient

Rotating

Fig. 14 · parametric_curve1_param_rotate.html

Open

Parametric Equation Visualization with Rotation

Interactive

Fig. 15 · parametric_curve23_explore.html

Open

Parametric Equation Visualization with Rotation

Interactive

Fig. 16 · parametric_curve2_explore.html

Open

Parametric Equation Visualization with Rotation

Interactive

Fig. 17 · parametric_curve2_generalized_explore.html

Open

Parametric Equation Visualization with Rotation

Interactive

Fig. 18 · parametric_curve3_explore.html

Open

Interactive Parametric Pattern

Fig. 19 · parametric_equation.html

Open

Pentagon to Star Morphing Animation

Fig. 20 · pentagon_star.html

Open

Pentagon to Star Morphing Animation

Fig. 21 · pentagon_star_full.html

Open

Pinterests Curve 1

Interactive

Fig. 22 · pinterest_generalization_explore.html

Open

Dynamic Complex Line Drawing

Fig. 23 · quart_motion.html

Open

Psychedelic line drawing

Fig. 24 · simple_quart_motion.html

Open

Cardioid Shape

Interactive

Fig. 25 · sin_cos_abstract_explore.html

Open

Triangle Animation

Fig. 26 · square_triangle.html

Open

Turtle Graphics Pentagon

Fig. 27 · turtle_forwarding_pattern.html

Open

Turtle Graphics Pentagon

Fig. 28 · turtle_forwarding_pattern3.html

Open

Turtle Graphics Pentagon

Fig. 29 · turtle_forwarding_pattern4.html

Open

Turtle Graphics Pentagon

Fig. 30 · turtle_forwarding_pattern5.html

Open

Triangle Animation

Fig. 31 · twotriangle.html

Open

Psychedelic Art Generator

Fig. 32 · psychedlic_art.html

Open

Windmill Curves

Fig. 33 · windmill.html

Backgrounds & Templates

Animated color backgrounds and gradient templates.

Open

Animated Gradient Background

Animated

Fig. 1 · animated_blue_background.html

Open

Rotating Gradient Background

AnimatedColor

Fig. 2 · animated_color_background.html

Open

Random Blue Gradient Background

Fig. 3 · bluebackground.html

Open

Color Picker with HSL Gradient

ColorGradientTemplate

Fig. 4 · color_gradient_template.html

Open

Color Picker with HSL Gradient

ColorGradientTemplate

Fig. 5 · color_gradient_template2.html

Experiments & Extras

Test pages and one-off experiments that don't fit elsewhere.

Open

Rotating Zonohedra

Rotating

Fig. 1 · rotating_zonohedra.html

Open

Square Animation

Fig. 2 · square1.html

Open

Recursive Squares

Fig. 3 · square2.html

Open

Donut Animation

Fig. 4 · todo_design/character_graphics.html

Open

Moving Circles with Complex Line Drawing

Fig. 5 · todo_design/concurrent_translation_and_reflection.html

Open

Rotating Lemniscate

Fig. 6 · todo_design/hypotrochoid.html

Open

Todo Design/Math

Fig. 7 · todo_design/math.html

Open

Polygon Drawing with Iterations

Fig. 8 · todo_design/notok.html

Open

3D Octahedron

Fig. 9 · todo_design/octahedron.html

Open

3D Octahedron

Fig. 10 · todo_design/octahedron1.html

Open

3D Octahedron

Fig. 11 · todo_design/octahedron2.html

Open

3D Octahedron

Fig. 12 · todo_design/octahedron3.html

Open

Parametric Equation Visualization with Rotation

Fig. 13 · todo_design/store.html

Open

Wavy Lines (v2)

Fig. 14 · todo_design/wavylines3.html

No pages match “”.