Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
謝謝惠喻
Last edited Sep 18, 2023
Created on Sep 18, 2023

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

A single yellow circle sits centered on a blank SVG canvas. The example demonstrates fundamental SVG shape creation and styling using D3 v5, where the circle's radius, x and y coordinates, and fill color are set through chained attribute methods. The code imports the `select` function from D3 and appends the circle element directly to the SVG container. CSS resets the page margin and hides overflow, while the fixed 960×1000 SVG viewport holds the static geometric figure.

BBoris97929500
89% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape creation and styling using D3.js v7. A large yellow circle with a black stroke is centered in the frame, alongside a rectangle and a semicircular arc path created with `d3.arc()`. The arc is drawn inside a `<g>` group translated to the svg's center. All shapes are rendered in an SVG container sized 960 by 500 pixels, with CSS applying stroke styles to line elements.

Ddiegobrivo
89% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A static SVG canvas displays a single large yellow circle with a grey outline, centered using explicit width and height attributes. The example demonstrates basic SVG shape creation and CSS styling through a D3.js v5 script that selects the root `svg` element, appends a `circle`, and sets its radius, position, fill, and stroke attributes. The accompanying stylesheet applies a full-bleed layout with no margin or overflow. This minimal composition highlights fundamental vector graphics and presentation techniques in a browser-based visualization.

AAnkush Malik
87% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how to build a simple face using SVG shapes—a yellow circle for the head and two smaller black circles for the eyes—positioned dynamically within an SVG canvas. The code selects the SVG element with d3’s `select` method, parses its width and height attributes, and appends the circles using method chaining with `attr` calls. Styling is applied via CSS classes and inline attributes, while the D3 v5 library is loaded from a CDN to handle the DOM manipulation.

Nnpk2001
87% match
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
87% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example draws a stylized face using SVG shapes in a 960x500 viewport. A yellow circle forms the head, with two smaller dark circles for eyes and an arc-based path creating a mouth, all positioned via absolute coordinates and a translated group. The code uses D3 v6 selection methods (`select`, `append`, `attr`) and the `d3.arc` generator to construct the mouth path with inner and outer radii and specified start/end angles. CSS rules define stroke styles for path elements, though the classes are not applied in the visible script. The rendering is entirely SVG, with D3 handling DOM manipulation.

Mmedhedijebara
86% 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
85% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using CSS, featuring a single circle element rendered inside an SVG container. The visualization relies on the SVG specification for drawing vector graphics, while the accompanying styles.css file applies visual properties such as colors, dimensions, and layout. The code uses standard HTML5 structure with a linked CSS stylesheet, and the circle is defined directly in the SVG markup. The example serves as a minimal demonstration of combining SVG’s geometric primitives with CSS styling techniques.

SSamarth Deverashetty
85% match