Skip to main content
SimilarExport ZIP
100%

Shapes with svg

✓ Published1🌍 Public
TTrustPaul
Last edited Oct 30, 2020
Created on Oct 30, 2020
Forked from HTML Starter

This example uses D3.js to draw a yellow circle with a black stroke on an SVG canvas, representing a face with a single black eye. The code appends SVG circle elements using D3 selections, setting attributes like radius, center coordinates, and fill colors directly. The circle’s size and position are derived from the SVG’s width and height attributes, while the eye is positioned relative to those dimensions. The visualization demonstrates basic SVG shape creation and attribute manipulation through D3’s `select` and `append` methods.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG

This example uses D3 v5 to draw a simple, cheerful face entirely with SVG shapes. It creates a yellow circle for the head, two smaller black circles for eyes, and a semi-circular path for a mouth, all positioned precisely within the SVG canvas. The code directly uses the D3 `select` API to append shapes to the SVG and the `d3.arc` function to generate the mouth's path data. The visualization demonstrates fundamental SVG drawing capabilities with D3.

Rralevine
90% match
Loading thumbnail…

Shapes with SVG and CSS

A yellow circle with black stroke forms a face, including two eyes with rectangular eyebrows and a semicircular mouth. The eyebrows animate by moving up and down using D3 v5's `transition` API on SVG `g` elements. The SVG is rendered on an HTML page, with the drawing positioned using `d3.select` and `d3.arc` to define the mouth path.

NNewSage-01
89% match
Loading thumbnail…

Shapes with SVG and CSS

A face constructed from SVG circles uses React to render two yellow circles with black strokes as eyes and a larger yellow circle as the head, all positioned using JavaScript variables for coordinates and radii. The example demonstrates how to create simple vector shapes with D3.js and React, using inline styling and SVG attributes to control fill colors, stroke widths, and layout within a 960x500 viewport.

Jjwadh
89% match
Loading thumbnail…

Shapes with SVG and CSS

This example draws a yellow circle with two black eyes and a red arc mouth using SVG shapes. It demonstrates the use of d3’s `select` and `arc` APIs to append `circle` and `path` elements to an empty SVG canvas. The size and position of each shape are computed from the SVG’s width and height attributes. The code relies on D3 v5 and the bundled JavaScript file, while CSS styles define stroke and color classes but do not affect the rendering logic.

FFransman85
88% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black eyes and a white rectangular lower section forms a simple face. The example demonstrates fundamental SVG shape creation and styling using D3 v5 methods like `select`, `attr`, and `append`, along with the `arc` generator for the mouth path. CSS sets the page margin and overflow. The visual is built entirely with static SVG elements positioned via attributes, with no data binding or interaction.

Aadlankj
88% match
Loading thumbnail…

Shapes with SVG and HTML

This example demonstrates how to draw a face using basic SVG shapes—circles, rectangles, a polygon, and an arc—positioned relative to the canvas center. The code leverages D3 v5 selection and attribute methods (`select`, `attr`, `append`) to build each element, with the mouth created via the `d3.arc()` function. It uses a fixed 960×500 coordinate space, with hardcoded pixel offsets for facial features like eyes and eyebrows, all rendered as SVG within a React-free HTML page.

SSUPERMAN79355
87% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black outlines forms a face, featuring two eyes and animated eyebrows, all rendered as SVG shapes. The example uses D3.js version 5 to select and append circles, rectangles, and a path, with the path drawn using the `arc` function to create a mouth. CSS styles the page, while D3 transitions animate the eyebrows' vertical movement over two-second intervals. The SVG canvas is 960 by 500 pixels, and all elements are positioned using transforms relative to the center.

MMargarita Chernetski
87% match
Loading thumbnail…

Shapes with SVG and CSS

This example creates a smiling face using SVG shapes styled with CSS and D3. The code draws a yellow circle for the head, two black circles for eyes, and a path for the mouth using d3.arc() with defined inner and outer radii. SVG attributes like cx, cy, and r position each element relative to the 960x500 viewport. A coral background is applied to the SVG via D3's selection style method, demonstrating basic shape creation and attribute manipulation with d3.select and d3.append.

LLincolnBollschweiler
87% match