Gist bcaa860506520cefb711aa4a9f885c12

100%

Gist bcaa860506520cefb711aa4a9f885c12

✓ Published0🌍 Public

Last edited Mar 27, 2019

Created on Mar 27, 2019

This example assembles a large sprite sheet of data visualization badges, arranging hundreds of PNG icons into a single 8192-pixel square grid. It shows the process of converting individual SVG badge files into a unified texture atlas for efficient loading in a projector tool. The script uses Python’s Pillow library (`Image.open`, `resize`, `paste`) to read, scale, and tile each icon, while calculating the grid dimensions with `math.sqrt`. It sorts the source files from a local SVG directory, converts them to PNGs, and saves the final composite to `sprite_image.png`.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist a8e5298b38b4f19fc2865612c90ddbcb

The visualization is a single SVG badge featuring a 46-by-46-pixel geometric star-shaped emblem with a central number "1" rendered in a bold, centered style. The star is formed by a complex polygon with 23 vertices, creating a spiked outline. The code uses raw SVG elements, including a `polygon` and a `text` element, with a CSS class (`cls-1`) applied to the text for styling. The rendering approach is purely vector-based, relying on static SVG markup without any JavaScript libraries or dynamic data. The badge likely represents a numeric score or rank, with the star shape serving as a decorative frame.

EEelsie

64% match

Loading thumbnail…

Gist 1057445

This example demonstrates a CSS sprite-based icon system where two distinct states—overview and demographics—are rendered as background images with active-state variations, using offset positioning to switch between icons. The code relies on Compass’s sprite helpers and a Sass `@each` loop to generate the `.icons-overview` and `.icons-demographics` classes, while manually specifying `background-position` values (e.g., `20px -70px` and `20px 12px`) to align the correct sprite icons. The active states toggle background positions via pseudo-classes like `:active` and custom classes such as `.overview_active`. The implementation uses the `icons-sprite` mixin from Compass, with the sprite file referenced from an external asset path. No data or interactive behavior is present; it purely showcases static UI icon styling.

CCaged

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

61% match

Loading thumbnail…

Gist 8d15c489a802400667a9e57997b4135d

This example visualizes the structure of a JavaScript object containing icon path data from Font Awesome and other sources. The code defines an object with icon names as keys and stores their SVG path strings, widths, and heights. It uses D3.js to build an interactive force-directed graph, rendering nodes and links with SVG elements. The visualization displays how these icon definitions are connected, with the data derived directly from the gist's file content.

LLandoLabrum

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

60% match

Loading thumbnail…

Gist 2bba23d8eda3ce767e87a6a491773372

The visualization is a scatterplot-style mosaic representing a 1000x1000 grid, plotting the positions and sizes of 234 rectangular claims from an Advent of Code puzzle. Overlapping rectangles accumulate, creating a dense heatmap-like field of colored blocks on a dark background. Built with Processing, the sketch loads the claim data from `aoc3_1.txt` and renders each rectangle using `rect()`, varying color intensity based on overlap count. The code uses `loadStrings()` to parse the input file and calls `noLoop()` to draw the static result once.

BBBischof

60% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

58% match

Loading thumbnail…

make a large png from map tiles

This example stitches map tiles into a single large PNG image. It constructs a grid of tiles by fetching them from a specified tile server URL using `wget`, then assembles them with ImageMagick’s `montage` command, first creating vertical bands per column and then concatenating those bands horizontally. The code handles tile caching in a temporary directory, detects image formats with `identify`, and substitutes missing tiles with a placeholder. The process is driven by command-line arguments specifying zoom level and tile coordinates.

PPhilippe Rivière

58% match