Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published2🌍 Public
LLuda Shashua
Last edited Oct 20, 2020
Created on Oct 20, 2020
Forked from Cars Report

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

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
92% 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
91% 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
91% 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
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
89% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a static collection of SVG shapes—circles, rectangles, lines, and a path—arranged in groups and scaled to fill the viewport. It demonstrates how Cascading Style Sheets (CSS) can style SVG elements, setting stroke colors, widths, and line joins via class selectors. The markup uses raw SVG elements like `<circle>`, `<rect>`, and `<path>`, with inline attributes for fill and translation. No JavaScript libraries are used; the page relies on plain HTML, CSS, and SVG rendering in the browser.

CConnor Trump
88% match