Rotating Icosahedron

100%

Rotating Icosahedron

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 4, 2013

An orange icosahedron rotates continuously in 3D space, rendered as a set of triangular faces projected with an orthographic camera. The animation uses `d3.geo.orthographic` to map each face’s spherical coordinates onto the screen, and a `d3.timer` updates the rotation over time. Each face’s polygon is checked with `d3.geom.polygon.area()` to hide back-facing triangles, while the paths are drawn as SVG `path` elements. The icosahedron’s vertex geometry is generated procedurally with the `icosahedronFaces` function, which computes latitude and longitude bands based on the golden ratio angle.

AI-generated description

The icosahedron serves as the base shape for the geodesic sphere; each face can be subdivided an arbitrary number of times to approximate the sphere with triangles.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Icosahedron

An animated icosahedron rotates beneath a fixed circular clipping boundary, revealing its wireframe edges in a spherical orthographic projection. The shape is generated from a custom D3 geodesic module that subdivides the twenty triangular faces of an icosahedron and projects their vertices onto a sphere. D3’s `d3.geo.orthographic` projection and `d3.geo.path` render the multipolygon geometry as SVG paths, with a `d3.timer` updating the projection’s rotation over time.

Mmbostock

85% match

Loading thumbnail…

Icosahedron

This example depicts a rotating icosahedron projected from a sphere using an orthographic projection. The solid’s faces, edges, and vertices are drawn as SVG paths, with faces filled in light gray, edges semi-transparent black, and points as black dots with white strokes. The geometric data is generated procedurally in JavaScript, calculating vertex positions from spherical coordinates. A d3.timer continuously updates the projection’s rotation along two axes, and the path generator re-renders each SVG element on every tick, creating a smooth animated spin using D3 v3’s geo and SVG utilities.

Mmbostock

84% match

Loading thumbnail…

Rotating Orthographic

This rotating orthographic projection displays a graticule and the equator as animated SVG paths on a sphere. It uses the d3.geo.orthographic projection with a rotating view, updating the projection’s rotation based on a timed loop. The sphere, graticule, and equator are drawn as SVG paths via d3.geo.path, with the animation driven by d3.timer incrementally adjusting the rotation angles.

Mmbostock

74% match

Loading thumbnail…

Sam Francis Icosahedron Art Toy For Tim

An animated icosahedron rotates in orthographic projection, its triangular faces filled with a Sam Francis painting to create a striking art-toy effect. The code uses D3 v3’s `d3.geo.orthographic` projection and a `d3.timer` loop to continuously rotate the shape, while each face is rendered as an SVG `path` with its vertices recomputed per frame. The painting texture comes from an external image URL applied via an SVG pattern, and the faces are conditionally hidden when their projected area becomes negative. The geometry is generated by the `icosahedronFaces` function, which builds the 20 triangular faces from latitude-longitude coordinates.

EElaineYu

74% match

Loading thumbnail…

Geodesic Rainbow

A glowing, rainbow-hued geodesic sphere rotates in space, its surface composed of triangular faces whose colors and edges shift continuously. An interactive slider adjusts the degree of subdivision, morphing the shape from a coarse icosahedron into a finely tessellated ball. Built with d3.geodesic and d3.geo.orthographic, the drawing renders to a Canvas context, with each face dynamically recolored via d3.hsl and rotated over time using d3.timer.

Mmbostock

74% match

Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

Mmbostock

73% match

Loading thumbnail…

Geodesic Grid

A rotating geodesic polyhedron wireframe displays a shimmering, three-dimensional grid atop a fixed circular frame. The visualization uses d3.geodesic to generate a subdivided icosahedron’s edges, rendered as an animated SVG path via d3.geo.path with an orthographic projection. The d3.timer continuously updates the projection’s rotate parameters, creating smooth, continuous motion.

Mmbostock

73% 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

72% match