Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
MMarketaInce
Last edited Dec 3, 2019
Created on Dec 3, 2019
Forked from Untitled

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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
94% 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
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—within an SVG canvas, styling them with CSS classes and inline attributes. The visualization showcases grouping and transformation techniques, such as scaling and translation, to position and layer elements. It uses the native SVG API for rendering and CSS for stroke and fill customization. The code also includes asynchronous JavaScript data handling with Promises, filtering and formatting car data into a text report, though this logic is separate from the visual shapes.

Mmjoaquim12
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a simple SVG circle rendered on a page with CSS styling, accompanied by a JavaScript module tutorial. It uses native SVG elements for the circle shape and CSS for layout and typography. The code loads car data from a static JSON array via a Promise (`getCars`), filters and formats it with ES modules (`formatCar`, `generateReport`), and updates the DOM text content asynchronously. The example highlights JavaScript object handling, array methods, and module imports/exports, alongside basic SVG markup.

Mmaakosu2
91% match
Loading thumbnail…

Shapes with SVG and CCS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS properties like fill and stroke. It uses static SVG markup within an HTML file, with a third set of shapes grouped under a transformation and stroke styles. The code also builds a text report by filtering car data with `generateReport` and formatting entries via `formatCar`, though the resulting message is not visibly rendered on the page.

HHelenaShu
91% match
Loading thumbnail…

Shapes with SVG and CCS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS properties like fill and stroke. It uses static SVG markup within an HTML file, with a third set of shapes grouped under a transformation and stroke styles. The code also builds a text report by filtering car data with `generateReport` and formatting entries via `formatCar`, though the resulting message is not visibly rendered on the page.

HHelenaShu
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using inline SVG attributes and external CSS rules. The gallery features a static, premade SVG render and also includes a JavaScript-driven report that filters and formats used-car data from a hardcoded JSON array, displaying the results in the page via DOM text manipulation. Rendering uses the SVG API, while CSS handles stroke, fill, and color styling through class selectors. No external visualization libraries are used.

RRod Potter
91% 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
91% match