Skip to main content
SimilarExport ZIP
100%

Vis. variations on Recamán sequence

✓ Published0🌍 Public
KKcnarf
Last edited Jul 4, 2019
Created on Jun 20, 2018

This block presents seven animated visual variations of the Recamán sequence, showing paths drawn with different geometric shapes—circles, hexagons, losanges, squares, rounded squares, zed squares, and rounded pluses—derived from the same sequence of numbers. The main path animates via CSS keyframes using stroke-dashoffset, while thumbnails of each shape fade in sequentially and are clickable to switch the main visualization. Built with D3.js v5, the code computes the sequence programmatically and renders SVG paths with CSS animations for the reveal effect.

AI-generated description

This block displays some visual variations on the Recamán sequence. Inspiration comes from the Numberphile's video The Slightly Spooky Recamán Sequence.

Here is how the Recamán sequence is computed :

a(0) = 0;
for n > 0:
	a(n) = a(n-1) - n if positive and not already in the sequence,
	a(n) = a(n-1) + n otherwise

Technically speaking, this block allows me to experiment path animation with CSS.

Acknowledgments to :

mit Licensed

Similar vizzes

Loading thumbnail…

Circular Geometric Patterns

This interactive visualization cycles through circular geometric patterns, drawing a series of overlapping circles and a connecting polyline at the center of an SVG canvas. The pattern evolves automatically as a timer increments both the number of nodes and a "skip factor" that determines the angular spacing between points. Built with React and D3 v5, it uses `d3.range`, `d3.line`, and `d3.curveLinearClosed` to generate points along a circle and construct the path, while React's `useState` and `useEffect` drive the animation loop.

CCurran Kelleher
70% match
Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel
70% match
Loading thumbnail…

Shapes Practice

Animated SVG composition of 300 rectangles and 300 circles, rendered with D3 v6 in a React framework. Rectangles initially draw as thin gray strokes, then transition to transparent fills with pink outlines before expanding to fill the entire canvas. Circles begin as large transparent rings with thin white strokes that thicken, then shrink to small points while drifting downward. Transitions sequence over 15-20 second durations, creating a slow rhythmic interplay of shape transformations across the 960x500 viewport.

MModalMBS
69% match
Loading thumbnail…

Circular Geometric Patterns

This animated example generates circular geometric patterns by placing points along a circle and drawing both the connecting polygon and overlapping circles around each point. As the animation runs, a continuously increasing skip factor and node count alter the points’ positions, producing evolving abstract shapes. The visualization uses React for state management and rendering, with D3’s `line` and `curveLinearClosed` to create the polygon path, while each circle’s radius is calculated from the distance between the first two points. The scene is rendered as SVG, with a blue semi-transparent outline tracing the polygon and gray strokes for the circles.

EEric Rodenbeck
69% match
Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita
69% match
Loading thumbnail…

Hello Cercles

A red circle moves through a square path in five animated steps around a central group of four static circles in green, blue, pink, and orange. Clicking either the red circle or a black rectangle triggers its sequential journey via chained `transition` calls that update `transform` attributes. The example demonstrates D3.js v5 selections, SVG rendering, and local ES6 module imports for displaying a text message.

Zzeyneb.mhamedi@gmail.com
69% match
Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel
69% match
Loading thumbnail…

squares-around-circles

The animation shows a grid of small circles, each surrounded by four square outlines that continuously expand and rotate. The squares appear to “breathe,” pushing outward and then resetting in a cyclical loop, creating a pulsing, geometric pattern across the screen. The code uses D3.js with SVG paths, leveraging the `transition` and `attrTween` methods for smooth movement. Each square’s position and orientation are calculated from its center point and a side number, updated via functions like `pushLinesOut` and `pointToPath`. The data is generated procedurally, with no external dataset.

11wheel
69% match