Skip to main content
SimilarExport ZIP
100%

SVG Basics

✓ Published0🌍 Public
IIndra Varma
Last edited Dec 4, 2022
Created on Dec 4, 2022
Forked from HTML Starter

This example demonstrates how to create basic vector graphics using SVG elements within a React-based project. It uses static shapes with specific coordinates, including a circle positioned at (50,50) with a radius of 50 and a rectangle with a red outlined border and no fill. The SVG canvas is sized at 960 by 500 pixels, and the page uses minimal CSS to reset margins and hide overflow. The example serves as a bare-bones introduction to inline SVG markup embedded directly in an HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG, showing how basic shapes, styling, and coordinate systems come together to create static vector graphics. The code uses plain SVG elements like `<circle>`, `<rect>`, and `<path>` with CSS properties such as `fill` and `stroke` to define appearance. It relies on the built-in browser DOM API for SVG manipulation, with no external visualization libraries. The example, rendered via a React starter template, provides a bare-bones HTML page structure for learning how SVG integrates with web technologies.

Sspace-captain96
90% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational shapes used in SVG graphics, including a circle, a rectangle, and a line rendered within a 900 by 500 canvas. It showcases how CSS styling controls the presentation of a message, while inline SVG attributes define the geometry and appearance of each shape, such as the rectangle’s red fill and black stroke. The code uses raw SVG elements in an HTML page with embedded JavaScript and CSS, serving as a minimal starter for understanding vector graphics without external libraries.

Eednut
90% match
Loading thumbnail…

SVG Foundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—arranged on a 960x500 canvas. The graphic uses raw SVG markup embedded directly in an HTML page, with CSS styling applied to the message class only. Each shape shows basic attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, `fill`, `stroke`, and `stroke-width`, illustrating how geometric primitives compose a static vector illustration. The code does not rely on external libraries, but is intended as a starting point for React-based visualization projects.

Kkevin kori
90% match
Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes—circles and a rectangle—positioned on a 960 by 500 canvas, with circles colored via the `fill` attribute and a rectangle outlined with a blue `stroke`. The code uses raw HTML markup inside an `<svg>` element, showing basic static rendering without JavaScript interaction. It serves as a minimal introduction to SVG syntax, including coordinates (`cx`, `cy`, `r`) and styling properties, as part of a React starter context, though no React components or data sources are employed here.

NNathelen
90% match
Loading thumbnail…

SVG fundamental

This example showcases fundamental SVG shapes—a red circle, a blue-bordered rectangle, a thick navy line, and a black path—all placed on a 960 by 500 coordinate system. The code uses raw SVG elements (circle, rect, line, path) within an HTML file, augmented by the React framework for structure. It demonstrates basic vector rendering and styling through attributes like fill, stroke, and stroke-width, providing a clear starting point for building more complex data visualizations.

Yyankesswang
90% match
Loading thumbnail…

SVG examples

This example demonstrates basic SVG shapes rendered directly within a React project, showcasing a red circle and a green rectangle positioned inside an SVG container. The page uses a minimal HTML structure with inline SVG elements, styled by an external stylesheet that sets a pink background and hides overflow. The code relies on standard SVG APIs for drawing shapes, with no additional JavaScript libraries beyond the HTML and CSS files provided.

WWang Tian
90% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes on a blank canvas, including a pink circle, a thick navy line, and an unfilled rectangle. It shows how basic geometric elements are positioned using coordinate attributes like `cx`, `cy`, `x`, `y`, `width`, and `height`. The code renders directly through React’s JSX syntax, embedding an `<svg>` element with a fixed width of 960 and height of 500. It uses plain SVG markup without any additional libraries, relying solely on native browser support for vector graphics.

EEarnAnurat
90% match
Loading thumbnail…

SVG Fundamental

This example demonstrates the foundational structure of an SVG graphic by rendering a single circle element within a basic HTML document. It shows how SVG markup can be embedded directly into a web page to create vector shapes, with the circle positioned at coordinates (150, 150) and a radius of 100 units. The rendering approach uses the browser’s native SVG support, requiring no external JavaScript libraries or data sources. The code illustrates the minimal setup for SVG, combining HTML structure with CSS and inline SVG elements to establish a clear, static visual. No dynamic behavior or data binding is present; it serves purely as a starting point for understanding SVG fundamentals in a React context, though the example itself is plain HTML.

Kkhaksok66@gmail.com
90% match