Ejercicio 1.1 Formas y colores con SVG and CSS

100%

Ejercicio 1.1 Formas y colores con SVG and CSS

✓ Published1🌍 Public

Last edited May 4, 2020

Created on May 3, 2020

Forked from Shapes and Colors with SVG and CSS

This example shows a collection of simple geometric shapes—an ellipse, a rectangle, and a vertical line—positioned within an SVG canvas. The shapes are grouped and scaled using the `transform` attribute, with the line receiving a red stroke color via inline CSS. The rendering relies on raw SVG elements and CSS styling, with the `.lines` class defined in an external stylesheet, though the displayed elements primarily use inline presentation attributes. The code uses standard SVG APIs (`ellipse`, `rect`, `line`) and CSS for styling, with no external libraries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using CSS for styling and the SVG `transform` attribute for scaling and translation. It shows how CSS classes like `.lines` define stroke properties and how inline attributes such as `fill` and `stroke` affect individual elements. The rendering uses raw SVG in HTML with a `<g>` group to apply coordinated transformations, and the included stylesheet controls global layout and path-specific presentation. The code relies solely on native SVG and CSS, with no external libraries.

SSistemas Integrales

82% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

Shapes and Colors with SVG and CSS demonstrates basic vector graphics primitives and styling. Circles and rectangles appear with default black fills, then explicit inline fills like red and `#83cc2a`, and a grouped set with a light fill and black stroke. The example uses SVG elements `circle`, `rect`, `line`, and `path`, with CSS classes (`.lines`) controlling stroke properties on paths. A `transform` attribute scales the entire drawing while nested `translate` groups position elements. Styling combines presentation attributes, inline styles, and an external stylesheet.

AAndres Bizzarri

80% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

AAndres Bizzarri

80% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling, showing how circles, rectangles, lines, and paths are rendered on a 960x500 canvas. A group element applies shared fill and stroke properties to multiple shapes, while a separate class selector styles paths with rounded line joins and caps. The SVG is scaled using a transform, and colors are set via presentation attributes or CSS rules. The code uses plain SVG APIs within an HTML document, with no external JavaScript libraries.

DDuyun Tan

80% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates simple geometric shapes and styling rules using SVG elements and CSS. It shows a circle, rectangle, and lines grouped with transforms for scaling and positioning, while CSS classes control stroke properties. The code uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` elements directly, with the `transform` attribute for translations. The `styles.css` file applies specific stroke colors and widths to elements within the `.lines` class. The rendering is purely SVG, with inline fill and stroke attributes combined with external stylesheet rules.

Sswathi24288

80% match

Loading thumbnail…

Shapes with SVG and CSS

Sswathi24288

80% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, a path, and a polygon—styled with inline CSS properties and grouped transforms. The SVG markup uses fill, stroke, and stroke-width attributes to apply color and outlines, while a scaling transform enlarges the first group of shapes and a translation move repositions the line and polygon group. No external libraries or data are used; the rendering relies purely on native SVG elements and a minimal external stylesheet that resets the body margin.

Rrjohnson5016

80% match

Loading thumbnail…

shapes with SVG and CSS

This example shows a collection of basic geometric shapes—a circle, a rectangle, a line, and a path—rendered inside a single SVG canvas. The shapes are styled and transformed using CSS rules and inline presentation attributes, demonstrating how CSS can apply strokes, fills, and transformations like translating and scaling to SVG elements. The code uses raw HTML with an SVG element, and a linked `styles.css` file defines classes such as `.lines` and `.highlited` to control visual properties, including stroke color, line joins, and a scale transform on the line group.

PPaolaAntonicoli

80% match