Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Bbl75d
Last edited Feb 26, 2020
Created on Feb 26, 2020
Forked from HTML Starter

This example demonstrates how basic SVG shapes and CSS styling can be used to create a static composition. It shows circles, rectangles, lines, and a path arranged in groups, with some shapes using inline fill colors and others inheriting styles from a group transform. The code uses React to render SVG elements, with the `style.css` file applying strokes and stroke widths to the line and path elements. The SVG is scaled and translated to position the shapes within a fixed 960 by 900 viewport.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition. It demonstrates how CSS classes and inline attributes style the shapes, including fill colors, strokes, stroke widths, and transforms for scaling and translation. The code uses React to render the SVG markup within an HTML page, with a linked stylesheet defining styles for groups and individual elements. No interactive behavior or data binding is present; the visualization serves purely as a styling and layout demonstration.

Xxychen0612.cs09@nycu.edu.tw
94% match
Loading thumbnail…

Untitled

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged within a single 960x500 viewport and scaled 1.5x. It demonstrates how CSS classes, such as `.lines` and `.lines path`, can apply stroke styles and line joins, while inline attributes like `fill` and `stroke-width` override or augment those rules. The SVG is rendered directly in HTML with React absent, relying on native SVG elements and a linked stylesheet. Colors and transform groupings illustrate visual composition without interactive behavior or external data.

RReekMajumder
92% match
Loading thumbnail…

Untitled

This example displays a collection of basic geometric shapes—rectangles, circles, ellipses, a line, a polyline, a polygon, and a path—drawn on a static SVG canvas. Each shape uses distinct stroke colors and thicknesses, with variations such as rounded corners and dashed-free outlines. The rendering is implemented directly within an HTML file using inline SVG elements without any additional JavaScript libraries or frameworks. React is listed as the framework, but the code shown is purely declarative SVG markup, focusing on fundamental vector graphics primitives.

KKhatera Alizada
89% match
Loading thumbnail…

Untitled

This example shows a collection of geometric shapes rendered directly in SVG, including circles of varying radii and colors, a navy line from the origin, and a red path with arc and quadratic curve segments. The code uses plain SVG element syntax within an HTML file, with a commented-out rectangle demonstrating how to toggle shapes. Each shape is positioned explicitly via cx, cy, x, y, and path data attributes, and styling is applied through fill, stroke, and stroke-width properties. The visualization is static, with no interaction or data binding, serving as a bare-bones demonstration of basic SVG drawing primitives in a standalone page.

Zzinthaw
89% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a static composition of basic SVG shapes—circles, rectangles, lines, and a path—arranged within a scaled and translated group. The code uses plain SVG elements to draw the shapes, while CSS classes (`.lines`) apply stroke styling, including a customized stroke-linejoin for the path. React is listed as the framework, though the provided markup is a standalone HTML page with an external stylesheet. The visualization demonstrates how SVG attributes like `fill`, `stroke`, and `transform` combine with CSS rules to control appearance, showing both default and overridden style properties.

AAloysius
88% 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
88% match
Loading thumbnail…

Untitled

This example demonstrates basic SVG shape construction on a static HTML page, combining a diagonal line, a rounded rectangle, and a vibrant green circle within a translated group. The visualization labels the shapes as "Rectangle" and "Circle" using monospaced text, while a larger title announces "d3.js 学习 Day01" (D3.js Learning Day 01). The code relies on raw SVG elements—`line`, `rect`, `circle`, `g`, and `text`—styled with inline CSS and attributes like `transform`, `fill`, and `stroke`. No JavaScript libraries are imported; it is a pure HTML/CSS/SVG composition.

Jjexchan
87% match
Loading thumbnail…

Shaped with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using CSS classes and inline attributes. It shows the use of SVG transform attributes for scaling and translation, alongside CSS rules that define stroke properties, fill colors, and line joins. The code relies on native SVG elements and CSS, without any external libraries, and renders static geometric compositions within a fixed 960×500 viewport.

JJoachimSchaeffer
87% match