Fruit bawl

100%

✓ Published0🌍 Public

Last edited Sep 27, 2019

Created on Sep 27, 2019

Forked from Shapes and Colors with SVG and CSS

This visualization displays a static bowl of fruit rendered entirely through inline SVG shapes, with all styling defined in an external stylesheet. The SVG canvas is 960 by 500 pixels and contains no dynamic elements or data-driven features. The rendering relies on raw SVG elements such as `<svg>`, `<g>`, and `<path>` with CSS classes for stroke and fill properties, including `stroke-linejoin` and `stroke-linecap`. The example demonstrates basic SVG structure without any JavaScript libraries, showing a hand-coded illustration rather than a data mapping.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit

This example shows a simple still life of a bowl of fruit, drawn as two black dots on a large yellow circle with a black outline. The visualization uses basic Scalable Vector Graphics (SVG) shapes defined directly in an HTML page, with circle elements specifying center coordinates, radii, and fill and stroke styles. The rendering relies on inline SVG markup rather than any external JavaScript library, and the page is styled with a minimal CSS reset to remove default margins and hide overflow. No interactive or animated behavior is present in the code.

PPaolaAntonicoli

86% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit is represented as five apples generated from a static array of fruit types. The visualization uses D3 version 5 to select the SVG canvas and set its dimensions, then creates the fruit objects with a simple factory function. The code relies on D3's `select` and `range` utilities to build the data structure, though no visual rendering of the fruit is implemented. The SVG output is 960 by 500 pixels, with basic CSS resetting margins and hiding overflow.

JJohn O'Donoghue

83% match

Loading thumbnail…

Bowl of Fruit

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are drawn as circles with color and size mapped to fruit type. The scene animates through a sequence of state changes—removing fruits, replacing one type with another, and filtering—using D3.js v5 selections and merge operations. The SVG output is generated declaratively, with the `scaleOrdinal` function mapping fruit types to visual properties like fill color and radius. The bowl itself is a static rectangle with rounded corners, while the fruits are positioned and updated imperatively via a custom `fruitBowl` function that handles entering, exiting, and updating elements.

Ssakhabutdinov

82% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows a row of apples and lemons rendered as colored circles on a rounded rectangle, with each fruit labeled by type. The visualization updates over time as apples are removed or replaced with lemons, demonstrating data joins. Built with D3 v5, it uses `scaleOrdinal` for color and radius mappings, `selectAll` with enter/merge/exit patterns, and SVG groups with `translate` transforms. The rendering is SVG, with the bowl drawn as a `<rect>` and fruit as `<circle>` elements.

Zzhangfa

81% match

Loading thumbnail…

Bowl of fruit

This example demonstrates the dynamic addition and removal of fruit shapes in an SVG bowl, where each fruit is represented as a colored circle with a label. The visualization uses D3 v5’s data join pattern to bind fruit data to SVG circle and text elements, with smooth transitions animating the circles’ positions and radii over one second when data updates. React serves as the integration framework, while D3’s ordinal scales map fruit types to colors and sizes, and exit selections shrink departing circles to zero radius before removal.

Aandy-yc-lin

81% match

Loading thumbnail…

Bowl of fruit - Nested Elements

A bowl of fruit demonstrates nested SVG elements with a dynamic data join, showing apples and lemons arranged in a row. The visualization uses a D3 ordinal scale to map fruit types to colors and radii, while enter, update, and exit selections manage the transitions as fruits are eaten or replaced over time. Circles and text labels are appended within each group element, and the bowl is drawn as a rounded rectangle behind the fruit.

Hhugomell

81% match

Loading thumbnail…

Bowl of Fruit

This example shows a static bowl of fruit as five red circles arranged horizontally across an SVG canvas. It demonstrates fundamental DOM manipulation with D3.js by binding an array of fruit objects to circle elements, appending them on enter, and removing them on exit when the array shrinks. The code uses D3 v5’s `select`, `range`, `data`, `enter`, `exit`, and `remove` methods to update the visualization, with the final pop operation removing the last apple from the display.

KKarkG

81% match

Loading thumbnail…

Bowl of fruits

A dynamic SVG visualization renders a changing bowl of fruits using D3 v5's data-join pattern. Five apples appear initially, then the code removes one fruit, converts another to a lemon, and filters out a third over timed intervals. The fruitBowl module applies `scaleOrdinal` for color and radius, mapping apples to red circles and lemons to yellow ones. Circles enlarge on hover via CSS, showing interactive feedback.

Vvladvaculin

81% match