Formas com SVG e CSS

100%

Formas com SVG e CSS

✓ Published2🌍 Public

Last edited Apr 29, 2020

Created on Apr 28, 2020

This example shows a simple composition of geometric shapes created with SVG and styled using CSS. It draws a filled circle and a rectangle inside an SVG canvas, with the shapes positioned using a transform translation and given a light blue fill and black stroke. The code uses basic SVG elements like `circle` and `rect` within a `<g>` group, and the page styling comes from embedded CSS. The dataset, stored as JSON in `carros.js`, references car performance attributes but is not directly visualized in the rendered output.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline attributes. It shows basic geometric forms composed in a single SVG canvas, with properties like fill, stroke, stroke-width, and transform applied to individual elements or grouped via the `<g>` tag. The code uses plain React to render static JSX, relying on SVG’s native presentation attributes and a linked stylesheet for class-based styling, such as colored strokes on line groups. No data or interactivity is involved; the focus is purely on visual construction and CSS inheritance.

Ccledevoute

85% match

Loading thumbnail…

shapeswith SVG and css

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered on a 900×500 canvas with CSS styling applied via an external stylesheet. It shows how SVG elements can be grouped using `<g>` transformations like scaling and translation, with individual shapes colored through fill and stroke attributes alongside CSS-defined font and margin rules. The code uses plain SVG markup within an HTML page, linked to a `style.css` file, and relies on React as the framework for the surrounding project structure. Shapes appear in varied positions and colors, including a red circle, green rectangle, and stroked paths, illustrating fundamental SVG composition.

Sshatomouimena

84% 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

84% 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

84% match

Loading thumbnail…

Shapes with CSS and SVG

This example demonstrates how CSS and SVG can be used together to create and style basic geometric shapes, including circles, rectangles, lines, and paths, within a scalable vector graphic. The SVG elements are organized using transforms for scaling and translation, while CSS classes apply stroke and fill properties, showcasing the interplay between presentation and structure. The example is built with React and renders purely through SVG markup.

Ffedericojv

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes with SVG and style them using CSS. It uses raw SVG elements like `circle`, `rect`, `line`, and `path` within a `<g>` container, with CSS classes controlling stroke and fill properties. The code shows shape attributes set inline (e.g., `fill`, `stroke-width`) and via a stylesheet, including a group with translated coordinates and another with a rounded path. No JavaScript or external libraries are involved; the visualization relies entirely on static SVG markup and a linked `styles.css` file.

Aariashary

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example renders a static composition of SVG shapes—circles, rectangles, lines, and a path—on a 960×500 canvas. It demonstrates how CSS classes and inline attributes control visual styling, such as fill colors, stroke widths, and line joins. The SVG is scaled with a transform, and elements are grouped using `<g>` tags to apply shared styling like white fill with green strokes. The code uses raw SVG syntax, including the `d` attribute for the path’s move-to and line-to commands, and a linked stylesheet assigns stroke properties to the line and path groups. No external libraries are used.

Vvic126

84% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—a circle, rectangle, line, and path—styled with CSS classes and inline attributes, rendered with React. The SVG canvas uses a 960x500 viewport, with shapes grouped and transformed. CSS rules in `style.css` control stroke color, width, and fill, including a highlighted class. The code references plain SVG elements and CSS selectors, with React’s `index.js` handling a text message, though the visualization itself relies solely on static SVG markup and stylesheets.

DdancingCars

84% match