Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
MMichelle Mac
Last edited Aug 17, 2020
Created on Aug 17, 2020
Forked from Hello VizHub

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—styled through CSS classes and inline attributes. It also displays a car report that filters and formats JSON data loaded asynchronously via a Promise from a simulated data source. The visualization uses raw SVG markup in `index.html` with CSS rules for stroke and fill, while JavaScript modules handle data parsing and text generation for the report.

MMarketaInce
94% 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 demonstrates how to combine SVG shapes with CSS styling and JavaScript data processing. It draws circles, rectangles, lines, and paths in an SVG canvas, using groups and CSS classes to apply stroke and fill properties. The page also displays a car report generated from hardcoded JSON data, filtered by price and formatted with ES6 template literals. The `getCars.js` file returns a Promise simulating async data loading, though the report uses the static list from the HTML.

AAnunay Biswas
93% match
Loading thumbnail…

Shapes with SVG

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.

BB Sundaresan
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates SVG shapes—circles, rectangles, lines, and paths—styled with CSS, including grouped shapes with customized fill, stroke, and translation transforms. It renders static geometric forms without interaction or data binding. The page also includes a separate JavaScript module that asynchronously fetches car data via a Promise and generates a filtered price report, though this logic is not visually connected to the SVG. The SVG uses plain DOM elements with attributes like `cx`, `r`, and `transform`, while styling comes from imported Google Fonts and CSS rules targeting classes like `.lines`.

RRod Potter
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

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
92% match