Skip to main content
SimilarExport ZIP
100%

SVG practice

✓ Published0🌍 Public
DDannie2020
Last edited Sep 10, 2020
Created on Sep 10, 2020
Forked from HTML Starter

This example demonstrates basic SVG shape rendering, showing circles, rectangles, lines, and paths composed within grouped transformations. It uses React to render the SVG markup directly in the browser. The visualization applies scaling and translation transforms to position elements, while CSS classes control stroke and fill styles. The code employs raw SVG elements like `circle`, `rect`, `line`, and `path` without any external data source, serving as a practice exercise for layout and styling techniques.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG practice

This example demonstrates basic SVG shapes rendered directly in an HTML document, including a circle, rectangle, and a curved path with a silver stroke. It uses no external libraries or frameworks, relying solely on raw SVG markup within the page. The visualization shows static geometric elements with distinct colors and positions, serving as a practice exercise for SVG syntax and styling. The code lacks interactive features or data binding, focusing purely on the visual output of primitive shapes.

TTim O'Brien
91% match
Loading thumbnail…

SVG CODE

This example demonstrates basic SVG shapes composed directly in an HTML page using React as the framework. It shows circles, rectangles, lines, and paths with various fills, strokes, and group transformations. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within an `<svg>` container, applying attributes for positioning and styling. Group elements (`<g>`) apply translations to offset multiple shapes at once, while inline presentation attributes define colors and stroke widths. The rendering relies entirely on static SVG markup without any dynamic data or interaction.

Jjyotigpt790
90% match
Loading thumbnail…

SVG shapes

This example demonstrates basic SVG shape rendering in a React visualization, showing circles, rectangles, lines, and a path. The shapes appear in three groups, with the first two displaying default and explicit fill colors, while the third uses a combined fill and stroke style. The line and path elements use a CSS class to apply black strokes with rounded joins. The SVG is scaled by 1.5 and uses inline transformation attributes like `translate` to position groups, with rendering handled directly through SVG markup rather than a charting library.

CChinzorigt Ganbat
89% match
Loading thumbnail…

SVG

This example demonstrates basic geometric shapes rendered as SVG elements, including two circles, two rectangles, a line, and a polyline path. The shapes are grouped with a light blue fill and black stroke, translated 200 pixels down the y-axis, while the line and path use a thicker stroke without fill. The code uses raw SVG markup within an HTML page, styled by an external CSS file that removes margins and hides overflow. The rendering approach relies on SVG's native coordinate system and transform attribute.

Ssagarknt97
89% match
Loading thumbnail…

SVG Starter

This example demonstrates how to create basic SVG shapes within a React application using raw SVG markup, without relying on external visualization libraries. It shows circles, rectangles, lines, and paths styled with CSS attributes like stroke and fill. The visualization uses static, hardcoded data rendered through SVG elements, including groups with transforms for scaling and translation, and nested shapes to illustrate layering and style inheritance. The code serves as a minimal starting point for building SVG-based visualizations in a web browser.

Ttrungngonptit
89% match
Loading thumbnail…

SVG

This example demonstrates basic SVG rendering primitives within an HTML page, composing geometric shapes inside a 960 by 500 canvas. The visualization shows how circles, rectangles, lines, and paths are positioned and styled, with one group translated and separately stroked. It relies on the raw SVG API (no external libraries), using attributes like `transform`, `stroke`, `fill`, and path data (`d`) to control appearance and layout, with CSS setting the overall page margins and overflow.

YYash G
89% match
Loading thumbnail…

SVG

This example showcases fundamental SVG shapes in a minimal React and CSS context. The visualization presents a green circle scaled up, a yellow rectangle with a black stroke translated downward on the canvas, and a set of black lines and a path with a rounded blue stroke. The code uses SVG elements like `circle`, `rect`, `line`, and `path` within an `svg` container, applying CSS classes and inline transformations for positioning and styling.

Eeman1718
89% match
Loading thumbnail…

SVG Shapes

This example demonstrates basic SVG shapes—circles, rectangles, and lines—rendered directly in a React application using plain SVG markup. The code creates a static composition with various colored fills, strokes, and a grouped transformation that offsets and recolors shapes. It also includes minimal CSS styling for the page layout and a highlighted text class. The visualization uses no external libraries, relying solely on the built-in SVG elements and attributes defined in the HTML file, making it a simple illustration of declarative vector graphics.

HHeath Wilkinson
89% match