Fork of Svg exercise

100%

Fork of Svg exercise

✓ Published0🌍 Public

Last edited Jul 2, 2023

Created on Jul 2, 2023

This example uses React and inline SVG to render a fixed composition: a red circle centered at (350, 350) with three black lines radiating outward, a navy-bordered rectangle spanning the left region, and the italicized red text "Titan" positioned to the right. The SVG elements are styled using a CSS class defined in the page’s `<style>` block, which sets the text’s font size, fill, stroke, and stroke width. The code directly declares SVG shapes (`circle`, `line`, `rect`, `text`) with explicit coordinate attributes, demonstrating a static vector graphic created without external libraries or data binding.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Svg exercise

This example demonstrates hand-drawn SVG shapes: a red circle with three lines radiating from its center, representing a simple graph or compass, overlaid with the italicized word "Titan" in large red text with a black outline. The composition is enclosed by a navy rectangular border. The code uses raw SVG elements—`circle`, `line`, `rect`, and `text`—styled via a CSS class to achieve the visual effect. All rendering is declarative, with coordinates and styling set directly in the markup and stylesheet.

RRakshith0405

90% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—positioned on a fixed 950 by 500 canvas. It shows how to set basic attributes like coordinates, radii, fill colors, and stroke widths directly in markup. The code uses raw SVG elements within an HTML page, with no JavaScript libraries or external data sources, to illustrate static vector graphics rendering in plain CSS and JavaScript context.

UUsman Haider

85% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes—a red circle and a rectangle—arranged both directly and inside a transformed group, rendering a simple geometric composition on a 500-by-500 canvas. The code uses plain SVG elements (`circle`, `rect`, `g`) within an HTML page, styled by a minimal CSS rule that removes body margins. JavaScript and React are not present in the actual markup, despite the metadata listing React as the framework. The example serves as a bare-bones starter for understanding SVG layout and coordinate transformations.

SSachin Araballi

84% match

Loading thumbnail…

Fork of SVG Fundanmentals

This example demonstrates basic SVG shapes—circles, a rectangle, and a line—drawn within a fixed 500×500 canvas. Two circles show default styling and a red fill, while the rectangle uses a navy stroke with no fill. The page relies on plain HTML and CSS, with no JavaScript libraries or data sources. It serves as a minimal foundation for experimenting with SVG fundamentals in a static document.

VValerieChen0987

84% 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

84% match

Loading thumbnail…

Fork of HTML Starter

This example displays a static SVG scene composed of a red circle, a green rectangle, a thick black line, and a zigzag path, all rendered on a 960 by 500 pixel canvas. The shapes are created directly in HTML using SVG elements such as `circle`, `rect`, `line`, `path`, and `g`, with styling applied through CSS attributes like `fill`, `stroke`, and `stroke-width`. No external libraries or data sources are used; the visualization relies solely on native SVG markup and inline presentation attributes to demonstrate basic geometric drawing capabilities.

Ddepane12

84% match

Loading thumbnail…

Fork of HTML Starter

This example shows a small set of basic SVG geometric shapes—a red circle, a blue rectangle with a red stroke, a thin navy line, and a large outlined rectangle—arranged on a 960 by 500 canvas. It renders directly using declarative SVG elements defined in static HTML, with no JavaScript logic or data binding. The visualization relies solely on SVG’s built-in shape elements like `circle`, `rect`, and `line`, styled via inline attributes for fill, stroke, and positioning.

DDev Dragon

84% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes—rectangles, circles, ellipses, lines, polylines, polygons, and paths—rendered directly into an SVG element with inline CSS and JavaScript. It serves as a minimal HTML starter page, using native SVG markup with attributes like `rx`, `stroke`, and `fill` to style transparent-outlined figures. The shapes are positioned across a 400-by-250 viewport, followed by a centered text label. The code relies entirely on browser-native SVG support and standard HTML/CSS, with no external libraries, illustrating basic vector graphics construction in a static React-free environment.

Sstefano@nava.ch

83% match