Skip to main content
SimilarExport ZIP
100%

Shapes

✓ Published0🌍 Public
NNita
Last edited Mar 2, 2025
Created on Mar 2, 2025

A stylized birthday cake visualization renders a multi-layered dessert with colored icing, sprinkles, chocolate drips, and seven striped candles with flickering flames. Drawn with D3.js primitives such as `append`, `ellipse`, `rect`, and `path`, the design is generated procedurally from random drip heights and symmetrical candle placement. The React wrapper uses `ResizeObserver` to recompute the SVG dimensions adaptively, while `renderSVG` manages the canvas and `renderBarChart` clears and redraws all shapes on each container resize.

AI-generated description

Cake Visualization

A detailed cake shape with candles created using D3.js. The visualization is responsive and will adapt to the container size.

The cake features:

  • Detailed layered cake with frosting
  • Multiple colored candles with flames
  • Decorative elements including sprinkles and icing
  • Chocolate drips and decorative borders
MIT Licensed

Similar vizzes

Loading thumbnail…

11594097

This example displays a stylized, seasonal cake built from layered SVG shapes. Using D3.js version 7, the visualization constructs each cake component programmatically: brown rectangles form the base layers, pink ellipses create frosting, and circles represent sprinkles and decorative elements. A golden candle with an orange flame tops the cake, while random category-colored dots add a festive touch. The scene is drawn with vector graphics on a fixed 500x500 canvas, set against a warm background. The code demonstrates D3's selection API for creating and styling SVG primitives with custom attributes and transformations.

Hhalinswaroopch@gmail.com
80% match
Loading thumbnail…

Fork of Fork of Blank Slate with Hot nice

This D3.js visualization renders a three-tiered birthday cake with distinct pastel layers, frosting scallops, candles with gradient flames, and decorative toppings like sprinkles and strawberries. The SVG is created dynamically using `d3.select().append()` to build shapes, while `d3.path()` constructs the curved frosting paths. Randomly positioned line elements generate the sprinkles, and radial gradients define the candle flames. The cake sits on an elliptical stand, with a bold text title anchoring the composition. The code explicitly sets the SVG dimensions and viewBox, with all elements drawn procedurally rather than from an external dataset.

NNita
79% 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
78% match
Loading thumbnail…

A Code Baked Layered Cake

This example uses D3.js to draw a layered birthday cake in an SVG canvas. It demonstrates fundamental DOM manipulation by appending SVG shapes such as rectangles, ellipses, paths, and circles to create the cake base, icing, cherries, and candles. The cake is constructed from three distinct layers, each with a different height and dripping icing, with decorative elements added through custom functions that calculate positions. The code directly uses `d3.select` and `.append` methods to build the static illustration without any data-driven interaction.

Ssanthoshdachepally333@gmail.com
78% match
Loading thumbnail…

11594097

This example renders a stylized decorated cake using D3. It builds the SVG scene from fixed-position shapes: layered rectangles form the cake tiers, while paths, circles, and ellipses add frosting, sprinkles, cherries, plate, and candles. The code relies on the D3 selection and append API to construct the drawing, with random sprinkle placement and a fixed color palette.

Hhalinswaroopch@gmail.com
78% match
Loading thumbnail…

Shapes Practice

Shapes Practice generates 300 rectangles and circles in an SVG canvas, each animated through long transitions that morph their size, stroke, and fill over time. The rectangles expand from thin strips to full canvas dimensions, while circles shrink from radius 100 to nearly invisible points. Built with D3 v6 and React, the code uses `selectAll`, `data`, and chained `transition` calls with duration attributes to drive the sequential transformations.

MModalMBS
77% match
Loading thumbnail…

cake 11714828

This example shows a stylized cake built with three layered rectangles, blue frosting strokes, red and pink sprinkles, three strawberries, and a candle with a flame. The code uses D3.js v6 to select an SVG container and append shapes, with randomized sprinkle positions generated via `d3.range` and `Math.random`. A static cake group translates to the center, and each layer, strawberry, and candle element is positioned with explicit coordinates, rendered as SVG rects and circles.

Llathabemanadham@my.unt.edu
77% match
Loading thumbnail…

Fork of slice

This example renders a simple three-layered cake using React with D3.js (v6) and SVG. It draws stacked rectangles for the cake layers, adds randomly positioned red circles as sprinkles, and places fixed circles as strawberries on top. A white rectangle represents the candle with an orange circle for the flame. The visualization uses D3's selection and append methods to construct the SVG elements, with styling applied via an external CSS file.

Llathabemanadham@my.unt.edu
77% match