100%

Dataviz 2018 - 1. SVG Basic Elements - Ep3

✓ Published0🌍 Public

Last edited Jun 15, 2021

Created on Oct 13, 2019

Forked from Untitled

This example showcases basic SVG shapes—a circle, rectangle, line, and path—arranged with geometric transformations. It demonstrates how the `transform` attribute’s `scale` and `translate` functions reposition and resize the grouped elements. The code uses raw SVG markup directly in the HTML, styled with CSS selectors like `.lines path` to apply green strokes and rounded line joins. A red-filled circle and a green rectangle appear under a scaled group, while a translated group uses a cyan fill with a black stroke. The path is drawn using the `M` (move-to) and `L` (line-to) commands.

AI-generated description

Basic Elements of SVG

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

JJSR2000

83% match

Loading thumbnail…

SVG

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a scaled and translated coordinate system. The code uses raw SVG elements within an HTML document, applying CSS classes to style the line and path elements with black and green strokes. A white-filled group with black outlines is layered over earlier shapes to show overlap and composition. The visualization shows how SVG coordinates and grouping transforms can be combined to build simple geometric compositions without any external JavaScript libraries.

JJasonXu1244

83% match

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates fundamental SVG and CSS shapes, including circles, rectangles, lines, and a path, organized within a scaled group. It shows how CSS classes like `.lines` apply stroke styling to the SVG elements, while inline `fill` and `stroke` attributes override defaults for specific shapes. The visualization uses D3.js’s `select` function to update a text message in the DOM. Rendering occurs through SVG elements with transforms, such as `scale` and `translate`, to reposition groups and illustrate basic vector graphics composition.

JJSR2000

83% match

Loading thumbnail…

SVG Basics

This example demonstrates fundamental SVG drawing primitives in D3 v5, including circles, rectangles, lines, and paths. The code shows how to position shapes using coordinates, apply fills and strokes, and leverage SVG groups with transform attributes for translation and scaling. It also illustrates path commands like M and L for creating connected lines. Styling is applied through both inline attributes and a CSS class defined in styles.css, highlighting basic SVG composition techniques.

Ssploitfun

82% match

Loading thumbnail…

SVG

This example shows basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition with varied fill colors and stroke styles. The code uses plain Scalable Vector Graphics (SVG) elements directly in the HTML, including a `<g>` group with `transform` attributes for scaling and translation. A CSS class named `.lines` applies black strokes and rounded line joins to the path, demonstrating how styles can style SVG geometry. No JavaScript libraries are used, and no data is loaded; the rendering relies solely on static markup and CSS.

GGloria Higley

82% match

Loading thumbnail…

SVG Fundamental

This example demonstrates a set of basic SVG shapes—circles and a line—arranged to show fundamental geometric primitives. It presents three circle variations, including a solid black circle, a two-tone circle with a light gray outer ring and purple inner fill, and a light blue circle, followed by a thick red horizontal line. The rendering uses raw SVG elements defined directly in the HTML, with inline styling for fills and strokes. Hover effects apply a CSS transform to scale the circle and line shapes on mouseover. No external libraries are used; the visualization relies solely on native SVG markup and CSS.

Ppaddyokore39@gmail.com

82% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic geometric shapes like circles, rectangles, lines, and paths are drawn and arranged using SVG elements. It demonstrates SVG transforms, including scaling and translation, to position and resize shapes, as well as CSS classes to control stroke color, width, and line joins. The visualization uses raw SVG markup with inline attributes for fill and stroke, alongside a stylesheet (`styles.css`) for styling. The layout is static, strictly demonstrating fundamental SVG and CSS techniques without any data binding or interaction.

BBryan Liu

82% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the basic drawing capabilities of SVG shapes, including circles, rectangles, lines, and paths. It shows how styling and presentation attributes can be applied individually to elements or inherited by a group, with transformations like scaling and translation used to reposition the entire composition. The code uses raw SVG elements, the `transform` attribute, and CSS classes (`.lines`) to control stroke properties such as color, width, line join, and line cap. However, the example does not connect to any external data source; it is purely a static visual demonstration of SVG’s built-in vector graphics features.

BBaodi

82% match