Svg exercise

100%

✓ Published1🌍 Public

Last edited Jul 2, 2023

Created on Jul 2, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Svg exercise

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.

RRakshith0405

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

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

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

85% match

Loading thumbnail…

SVG practice

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.

DDannie2020

85% match

Loading thumbnail…

SVG TEST

This example demonstrates the basic building blocks of SVG graphics on a plain HTML page. It shows how to create and style two circles and a rectangle using inline SVG elements, with one circle left unfilled and the other filled red. The rectangle uses a blue stroke with a width of 10 and no fill. The code exercises fundamental SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` within a fixed 200 by 200 coordinate system. No external libraries or data are involved; the visualization relies entirely on hand-written markup.

Bbtkg

85% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shapes—circles, a rectangle, and a path—rendered in black with red strokes or red with black strokes on a 960 by 500 canvas. The HTML page embeds an inline SVG element directly, using the `circle`, `rect`, and `path` elements with attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` to define geometry and styling. No JavaScript libraries are involved; the visualization relies purely on SVG markup and CSS presentation.

LLachlanJohnstone

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

84% match