Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
Ppuru001
Last edited Apr 27, 2022
Created on Apr 27, 2022
Forked from HTML Cars Report

This example shows how SVG shapes and CSS styling combine in a VizHub page. It draws a circle and a rectangle directly in the HTML markup, with a gray border around the SVG canvas. The page also demonstrates ES6 module imports, as `getCars` returns a promise that resolves after a delay to feed car data into `generateReport`, which filters by price and formats a text report. The report appears in a separate message element, while the SVG rendering stays static. The code uses native SVG elements and standard JavaScript promises, with no external visualization libraries.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example demonstrates how SVG shapes (a circle and a rectangle) are rendered directly in HTML using CSS for styling, while D3.js is loaded via UNPKG and used with local ES6 modules. The code imports `getCars` from a local module, which returns a promise resolving to an array of car data after a two-second delay, and `generateReport`, which filters cars by price and formats them using `formatCar`. The report is then displayed in a message element, showcasing asynchronous data handling and module imports within a VizHub project.

Ppuru001
89% 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 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
88% match
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
88% 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
87% match
Loading thumbnail…

Shapes with SVG and CSS

This example illustrates a car pricing report asynchronously loaded via a JavaScript Promise. The `getCars` module parses a static JSON array and resolves it after a two-second delay. `index.js` then filters this data by a maximum price using `generateReport`, formats each car with the `formatCar` template, and injects the resulting text into the DOM. The page also contains an SVG circle rendered solely with HTML and CSS, while the report text updates dynamically without any visualization library.

Kkimgarrard
86% 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
85% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to load and display JavaScript object data as text on an SVG-based web page. It uses asynchronous functions and modules to fetch car information, filter vehicles under a price threshold, and format the results into a readable report. The visualization renders a static SVG scene featuring a rectangle and a circle, while the report text updates below it. The code relies on ES6 module exports, Promises with `setTimeout`, and the `JSON.parse` method to handle the sample dataset.

Mmaakosu2
85% match