Skip to main content
SimilarExport ZIP
100%

second_work

✓ Published0🌍 Public
224cs044@kpriet.ac.in
Last edited Aug 7, 2025
Created on Aug 7, 2025

A row of basic SVG shapes—triangles and rectangles—demonstrates how fill color, stroke, and stroke-width attributes control appearance. The top row uses default black fills, the second row applies explicit red and green fills, and the third row, wrapped in a `<g>` element, uses a light blue fill with a black stroke. A separate group with the class "lines" draws a black polyline and a path with rounded joins and caps in a dark teal, using CSS to style these elements. The entire composition is scaled up by a factor of 1.7 via the SVG transform attribute.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and css

This example shows how SVG shapes and CSS styling can be combined to create a simple composition of circles, rectangles, lines, and a path. The first two shapes use default black fill, while the next two apply explicit red and green fills via attributes. A nested group applies a light blue fill and black stroke to its children, and a separate group with the class "lines" sets stroke color and width through CSS, with the path getting a cyan stroke and rounded joins. The entire drawing uses SVG elements and CSS rules, scaled 1.5 times within a 960 by 500 viewport.

Ssemopz
79% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using both inline attributes and an external CSS stylesheet. The first two shapes use default black fills, while later shapes apply explicit fills like red and a green hex code, and a group-level fill with a black stroke. CSS class `.lines` sets stroke color and width, with a nested rule for path line joins. The rendering uses raw SVG in an HTML file, with a scale transform and translated groups.

Aarg04
79% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates the rendering of primitive shapes—circles, rectangles, lines, and paths—using SVG elements with both inline presentation attributes and external CSS styling. The scene shows how default black fills appear on the first row, then explicit fill colors like red and green on the second, and a third group applies a light blue fill with a black stroke via a parent `<g>` element. CSS classes on the line and path elements set stroke colors, dash styles, and rounded line joins and caps. The SVG is embedded directly in HTML, with the CSS file defining page margins and shape-specific properties. The markup uses explicit coordinates and transforms to position the shapes.

Wwindwardpassage
79% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in two translated groups against a plain background. The first group shows default black shapes, while the second uses group-level fill and stroke attributes to alter appearance. A third group, moved horizontally, displays a stroke-heavy line and a semi-transparent steelblue path with rounded corners. The code relies on raw SVG elements and CSS class selectors (`.lines`, `.lines path`) for styling, with a JavaScript console log present but no interactive behavior.

Kkkwyoung
78% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in SVG with CSS-based styling. The shapes are organized into groups: the top two rows show default black fills, the third row applies a teal fill and black stroke via a `g` element’s presentation attributes, and the bottom group uses the `.lines` class to style a polyline with a thick orange stroke. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`) and CSS selectors to control colors, stroke widths, and line joins, with a `transform="scale(1.5)"` applied to the entire drawing.

Cclaudiatomateo
78% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped with SVG transforms. The first row uses default black fills, the second introduces explicit fill colors, and the third demonstrates a group-level fill with a black stroke. A fourth group applies a CSS class to style the lines and path with custom stroke width and colors. The rendering uses plain SVG elements in an HTML page, with CSS rules in `styles.css` controlling presentation attributes like stroke, fill, and line joins.

Mmallikgarjuna
78% match
Loading thumbnail…

Shapes with SVG and CSS

A small SVG canvas displays primitive shapes—circles, rectangles, a line, and a path—arranged in groups. The first two shapes use default black styling, while the next pair applies explicit fill colors (red and a green RGB value). A translated group demonstrates inherited fill and stroke attributes, and a classed group with thick black strokes contains a light-blue path with rounded line joins. The example shows how SVG presentation attributes and CSS rules (via the `.lines` class and element selectors) control appearance, with an SVG transform scaling the entire composition.

LLM2020
78% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes, using a series of circles, rectangles, and lines to illustrate basic styling and positioning. The circles show default black fill, a blue filled circle, and a smaller red circle overlaid on the blue one. The rectangle has no fill but a thick black stroke, while the line uses a navy color and a wide stroke. The code relies solely on the native SVG API within an HTML document, with no external libraries or data sources.

Ssirenajbpearl@gmail.com
78% match