Shapes Practice

100%

Shapes Practice

✓ Published1🌍 Public

Last edited Sep 24, 2020

Created on Sep 24, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

94% match

Loading thumbnail…

Shapes

This example displays a collection of simple SVG shapes in a React application, including circles and rectangles positioned on a 1000x1000 canvas with varied colors like green, yellow, brown, red, blue, and pink. The code directly uses the SVG API through JSX elements such as `<circle>`, `<rect>`, and `<g>` for grouping and translation transforms. It demonstrates basic static rendering of geometric primitives without any data bindings or interactions, illustrating how SVG markup is embedded within an HTML page styled with the `shape` class.

Kkaviya-ds

83% match

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—rendered on a 960-by-500 canvas. The composition uses a scaling transformation and a group with translation, fill, and stroke settings to show how attributes like fill, stroke-width, and stroke-linejoin alter appearance. The shapes are created directly in the markup with coordinates and styling, and the page is styled using a minimal CSS file, all within a React starter project.

Uujjwalgarad

83% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a set of geometric shapes—a circle, a rectangle, a line, and a path—arranged in a 960 by 500 SVG canvas. The SVG elements are wrapped in groups that use transform attributes for scaling and translation, while CSS classes style the line and path with strokes and rounded joins. Rendered through React, the code uses inline SVG with attributes like `fill` and `stroke-width`, and the stylesheet defines the `.lines` group’s properties.

MMo

83% match

Loading thumbnail…

Shapes

This example displays a set of basic SVG shapes—a circle, rectangle, line, and grouped shapes—positioned on a 900×500 canvas. It demonstrates how SVG primitives are styled with CSS and inline attributes, including fill colors, stroke properties, and transformations via a `<g>` element. The code uses plain HTML, CSS, and JavaScript, with SVG rendered directly in the browser. It shows how grouping elements and applying stroke, fill, and transform attributes affect the visual output.

DDavid Downie

82% match

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates the basic building blocks of SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It shows how a group element can apply shared fill and stroke properties, while a separate class targets line and path elements for custom stroke width and color. The code uses plain HTML, CSS, and JavaScript within a React framework, rendering via SVG. The shapes are manually positioned with fixed coordinates on a 960 by 500 canvas, with no external data source.

Vvoid-LSTM

82% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the basic drawing of primitive SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed layout on a 960×500 canvas. It shows how SVG styling is applied in several ways: directly with inline `fill` and `stroke` attributes, through inherited properties on a `<g>` group, and via CSS rules defined in an external `styles.css` file. The React-based code uses raw SVG elements within an HTML page, leveraging group transforms for scaling and translation.

Aavglim3

82% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shape rendering within a React-based visualization gallery. It shows circles, rectangles, lines, and paths positioned on a 960×500 canvas, with styling controlled through both inline attributes and CSS. The code uses raw SVG elements and CSS for presentation, including a group (`<g>`) that applies shared fill and stroke properties, and another group with stroke attributes for the line and path. No data is loaded; the shapes are statically defined in the HTML markup.

TTewarAK

82% match