Skip to main content
SimilarExport ZIP
100%

Shapes with SVG

✓ Published1🌍 Public
BB Sundaresan
Last edited Jun 29, 2020
Created on Jun 29, 2020
Forked from Hello VizHub

This example demonstrates a static SVG composition of geometric shapes, including circles and rectangles with varying fill colors, a transformed group, and line and path elements styled through CSS. The page also loads an asynchronous data set of cars, filtering and formatting those under $2000 into a bulleted report using custom JavaScript functions. Rendered in React with raw SVG markup, the visualization pairs basic vector graphics with a practical coding exercise in data processing.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example showcases static SVG shapes—circles, rectangles, lines, and paths—stylized with CSS and grouped via SVG transforms. It renders a report of car listings fetched asynchronously from a JSON array using a Promise, filtering by price and formatting with custom JavaScript functions. The visualization uses raw SVG elements with attributes like `fill`, `stroke`, and `stroke-width`, alongside CSS for global styling and highlighting.

MMichelle Mac
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped using SVG transforms. It shows how fill colors, stroke properties, and class-based styling apply to geometric elements. The code also includes a React-free JavaScript section that loads car data from an inline JSON string, filters it by price, and displays matching entries as text. The SVG uses native elements like `<circle>`, `<rect>`, and `<path>` with a `scale` transform, while the data handling relies on a Promise-based delay and DOM text manipulation.

Aases1996
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example showcases static SVG shapes composed of circles, rectangles, lines, and paths, all positioned within a 960 by 500 viewport and scaled with a group transform. The shapes use CSS classes to apply strokes and fills, with the path element receiving a green stroke and round line joins. The React app also loads car data from a JSON string, filters for prices under $10,000, and displays the formatted results in a message element after a simulated asynchronous delay.

LLuda Shashua
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example showcases static SVG shapes composed of circles, rectangles, lines, and paths, all positioned within a 960 by 500 viewport and scaled with a group transform. The shapes use CSS classes to apply strokes and fills, with the path element receiving a green stroke and round line joins. The React app also loads car data from a JSON string, filters for prices under $10,000, and displays the formatted results in a message element after a simulated asynchronous delay.

LLuda Shashua
92% match
Loading thumbnail…

Shapes with SVG and CSS

A static SVG scene shows circles, rectangles, a line, and a polyline path arranged in a decorative group, with teal, red, and blue fills, a red stroke on the rectangles, and green styling on the path via CSS. The page also loads a hardcoded JSON array of four cars, filters those under $10,000, formats each into a text string, and displays that text after a two-second Promise-based delay. The example uses React-compatible starter files, raw SVG elements, CSS class selectors, and JavaScript Promise `.then()` for asynchronous data handling.

LLuda Shashua
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styling them with both inline attributes and a CSS stylesheet. The shapes appear in two groups, with the lower set offset vertically to show filled versus stroked variants, while a separate group uses a CSS class to control stroke color and line joins. The page renders static SVG elements in a React-less HTML file, using plain SVG markup with transformations like `scale` and `translate` to position and duplicate shapes. No interaction or data binding occurs; the visualization purely illustrates SVG drawing primitives and CSS styling.

Sshungshung
90% match
Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in a React component. It uses plain SVG elements with attributes for positioning, sizing, and styling, including stroke widths, fills, and a group transform. A second group applies a cyan fill and black stroke to selected shapes, while a path uses round line joins. The code relies on React’s JSX to embed SVG markup, with styles from an external stylesheet. No data source is used; the visualization solely shows static geometric primitives.

Kkierra
90% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays primitive SVG shapes—circles, rectangles, and a line—statically rendered on an 960×500 canvas. It uses React to import and parse a local `cars.js` JSON dataset, though the data itself is not visually mapped to the shapes. The SVG elements are styled with inline attributes like `fill` and a linked `style.css` that sets body margins and overflow. A separate `index.js` module writes a “Hello world” message into the DOM, while the shapes remain fixed without interaction or data binding.

Jjrdieter15
90% match