Skip to main content
SimilarExport ZIP
100%

secret-santa

✓ Published0🌍 Public
11wheel
Last edited Nov 30, 2025
Created on Dec 3, 2022

A personalized Secret Santa name generator lets a user type their first name and see a randomly assigned gift recipient, with the match displayed in large, animated Christmas-colored text. The page shows a configuration panel with textareas for editing a list of names, exclusion pairs, and a random seed, all persisted in the URL via `URLSearchParams`. Input is processed by a custom shuffle loop using `Math.seedrandom`, while D3.js handles DOM selection and updates, and CSS animations control the zooming, striped background effect.

AI-generated description

Similar vizzes

Loading thumbnail…

Making a Santa Face with components

A grid of randomized Santa faces demonstrates component reuse in React with D3. Each face is rendered as SVG, composed of modular parts like eyes, beard, mouth, and hat, with random parameters varying eye offset, mouth radius, and face traits. The code uses React functional components, D3’s `arc()` for the mouth, and `range()` to generate the 15-face array. Styling is applied via CSS classes, and the layout scales with a transform.

MMauricio García Benítez
61% match
Loading thumbnail…

Making a Santa Face

This example renders a cartoon Santa face as an SVG graphic. It shows a face with layered eyes (sclera, iris, and pupil), a red hat with a white pompom and band, a mouth, and a beard, all accompanied by a “MERRY XMAS!!! HO HO HO” text. The visualization uses a React component with D3’s `select` and `arc` APIs to generate SVG paths for the mouth and beard arcs, while other shapes are drawn with SVG primitives (circles and paths). All elements are positioned relative to the canvas center using SVG transformations.

MMauricio García Benítez
60% match
Loading thumbnail…

Playing with selection.join

A dynamic SVG visualization demonstrates the `selection.join` API in D3 v7, animating a set of letters that changes every three seconds. Random alphabet subsets are generated with `d3.shuffle` and sorted, then mapped to `text` elements whose positions are computed based on their index. New letters enter in green, while existing ones update to gray, showcasing the join’s enter/update behavior. The example runs in a React environment, rendering to an SVG canvas sized to the browser window.

AAndrea Mignone
59% match
Loading thumbnail…

birthday guesser

This interactive visualization presents a birthday-guessing game in which a calendar highlights a subset of dates and the user answers yes/no questions. The tool displays a year grid, and each of nine cards recolors days according to a shuffled set of magic numbers; the user’s answers progressively narrow the possible dates. The code uses D3 v4 with SVG and animations, drawing calendars via `d3.timeDays`, `d3.timeFormat`, and a quantized color scale, and handles the interaction with click events that advance through the cards.

EEE2dev
59% match
Loading thumbnail…

Random Squares

Random Squares demonstrates SVG shape generation by populating a 1000×1000 canvas with 500 randomly positioned, sized, and colored rectangles. Each `<rect>` element receives a random RGB fill, a random x/y coordinate within the viewport, and a random width and height up to 50 pixels. The code uses vanilla JavaScript with `Math.random()` to compute values and `document.querySelector('svg').innerHTML` to append shapes directly to the SVG DOM. The result is a dense, chaotic mosaic of overlapping squares with no underlying data or interaction, showcasing basic SVG rendering through a simple procedural loop.

NNita
59% match
Loading thumbnail…

join example

This example demonstrates a dynamic visualization of random letter sequences rendered as SVG text elements, with each new sequence replacing the previous one. The code uses the D3 v7 library and creates an SVG canvas, then repeatedly generates shuffled letter arrays using `d3.shuffle` and `Math.random`. It applies the `selectAll("text").data().join()` API to handle enter and update states, coloring new letters green and existing ones gray, while positioning them horizontally with the `attr` method.

Sscheenmi@gmail.com
59% match
Loading thumbnail…

SVG text experiment - Interactive tool

This interactive tool arranges text cards around a central, dynamically generated phrase, drawing words from a CSV taxonomy of themes like body, material, and action. Users can adjust settings such as card count, theme, and pattern to remix content in real time. The visualization uses D3.js to load data, render SVG, and transition text, while GSAP’s TimelineMax and TextPlugin handle card rotation and path-based text animation. Center text updates recursively via D3 transitions, creating a generative brainstorming interface.

LLaurens
59% match
Loading thumbnail…

Untitled

A grid of 18 procedurally generated cartoon faces is displayed, each rendered as an SVG circle with eyes and an arc-shaped mouth. The faces vary randomly in stroke width, eye offset, eye radius, and mouth dimensions, creating a playful sense of variety. The visualization uses React components to structure the face elements, while D3 v7’s `arc()` generator produces the mouth paths. Each face is drawn with a simple `<svg>` and `<g>` transform, with all random parameters generated on every render via `Math.random()` and the `range()` helper from D3.

Jjchen6912
59% match