Sam Francis Icosahedron Art Toy For Tim

100%

Sam Francis Icosahedron Art Toy For Tim

✓ Published0🌍 Public

Last edited Jul 1, 2017

Created on Jul 1, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Rotating Icosahedron

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.

Mmbostock

74% match

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

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

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

67% match

Loading thumbnail…

d3 | 1 triangle repeated

This visualization arranges 45 identical triangles in a circular pattern, each rotated by 10 degrees around the center of an SVG canvas, creating a complex, gear-like mandala from a simple repeated shape. The code defines triangle vertices as coordinate pairs and uses D3 v4’s data join with `d3.range` to generate groups, appending a path per triangle via `append('path')` and the `datum` method. A slider input lets users adjust the number of triangles from 1 to 50, triggering a re-render with updated rotations, while all strokes use a semi-transparent yellow against a dark background.

EEndNight95

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

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

64% match

Loading thumbnail…

Samuel Karkache - Creative Coding with Circles

This example displays a generative composition of 50 semi-transparent circles and rectangles arranged in sinusoidal patterns on a light green background. The circles follow a wider elliptical path while the rectangles trace a tighter curve, with both shapes cycling through a palette of five colors. Built using the D3.js library (version 7.8.5) and its `select`, `selectAll`, `data`, and `join` APIs, the code procedurally generates each shape’s coordinates and attributes within a loop, then renders them as SVG elements. The visualization demonstrates creative coding by combining mathematical functions with basic geometric primitives.

SSamuel Karkache

63% match