Fork of Shapes with SVG and CSS

100%

Fork of Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jan 24, 2021

Created on Jan 24, 2021

This example renders a single fixed SVG circle on an HTML canvas. It demonstrates how to include D3 through UNPKG and import from local ES6 modules, though the visible output is purely a static `<circle>` element styled with CSS. The code loads D3 via UNPKG and uses inline SVG coordinates to position the shape, but no D3 functions are invoked for drawing or interaction. The styling comes from an external `styles.css` file that resets the body margin and hides overflow, while the circle itself remains unstyled.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Shapes with SVG and CSS

A single purple circle is drawn centered within an empty SVG canvas. The visualization demonstrates basic SVG shape creation and CSS styling using D3 v7. The code selects the SVG element with d3.select, appends a circle, and sets its radius and center coordinates via the .attr method. CSS rules define a stroke color and rounded line joins for path elements, though no paths are drawn in this example.

PPrathik Kulkarni

86% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a minimal SVG scene containing a single red circle, placed on a blank canvas. It highlights how SVG shapes can be styled using an external CSS file, with the circle’s default black fill and the page’s hidden overflow defined in `styles.css`. The code loads D3 via UNPKG and uses an ES6 `import` from `"d3"`, though no D3 functions are called. It also shows importing a local stylesheet through a `<link>` tag in `index.html`, with the `.highlighted` class available for future styling.

Vvictor11396

86% match

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles and rectangles—arranged in a grid and colored individually, with a group element translating a set of shapes down the canvas. It shows how SVG primitives can be styled and transformed using inline attributes. The visualization uses raw SVG markup within an HTML document, with CSS rules in `styles.css` controlling page margins and a highlight class. A single line element with a stroke is also included, though its closing tag is malformed. The code relies solely on native SVG and CSS, with no JavaScript libraries involved.

SSwavna

84% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling within an HTML page. The visualization displays circles, rectangles, lines, and a path, with groups using inline attributes for fill and stroke colors, while CSS classes apply stroke properties to line elements. The SVG is scaled using a transform, and the code references D3.js through an import but primarily relies on standard SVG and CSS for rendering. The accompanying JavaScript, though incomplete, attempts to create SVG elements dynamically using the Document API.

Ccsantiagopaz

84% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a single SVG circle rendered on a 960-by-900 canvas, using CSS to define stroke styles for a class called `.lines` that is not applied to any visible elements. The code employs basic SVG shapes (`<circle>`) alongside external stylesheet rules, though the circle itself remains unstyled. A linked YouTube video provides contextual commentary, while the rendering relies on native SVG markup rather than JavaScript libraries. The gallery entry highlights minimal SVG usage with CSS hooks, showing how simple geometric primitives can be embedded directly in HTML.

DDing

84% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example uses SVG and CSS to draw a single static shape: a yellow circle with a black outline, centered within a 960 by 500 pixel canvas. The underlying JavaScript, built with d3.v7, leverages the `select` and `append` methods from the d3 library to programmatically create the circle. The circle’s radius is set to half the SVG’s height, and its horizontal and vertical positions are calculated from the SVG’s width and height attributes, which are read and converted using `parseFloat`. Styling is applied via the `attr` method for fill color and stroke, resulting in a simple geometric visualization.

謝謝惠喻

84% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes, including circles, rectangles, lines, and paths, styled with CSS and inline attributes. It demonstrates grouping and transformation using the `transform` attribute, such as `scale` and `translate`, while applying fills, strokes, and stroke widths. The SVG is embedded directly in an HTML file, with external CSS controlling stroke properties for line elements. The rendering approach uses static SVG code, and the visual output is presented without any external data sources or JavaScript libraries.

Ppei9223

84% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling using CSS, featuring two circles of different sizes and colors within an SVG canvas. The larger blue circle with a black stroke contrasts with the smaller default black circle, while a CSS transform scales the entire group. The rendering relies on native SVG elements (`<circle>`, `<g>`) and a linked stylesheet (`styles.css`) that sets body margins, overflow properties, and stroke styling classes. The code uses standard SVG attributes like `cx`, `cy`, `r`, and `fill`, with no external JavaScript libraries, purely showcasing SVG's built-in capabilities for static vector graphics.

Ssaisathyapriya097@gmail.com

83% match