Fork of Fork of Shapes and Colors with SVG and CSS1

100%

Fork of Fork of Shapes and Colors with SVG and CSS1

✓ Published0🌍 Public

Last edited Feb 4, 2021

Created on Feb 4, 2021

Forked from Fork of Shapes and Colors with SVG and CSS1

A yellow circle face with SVG ellipses for eyes and a red smile is drawn over a red heart-shaped path. The code uses D3 v6 selections to append and style the circle, eyes, pupils, smile, and two smaller red heart ellipses as cheek decorations. The SVG template path provides the background heart shape, while d3.arc is imported but not used, with all rendering handled directly through SVG attributes in an HTML file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows a simple smiling face built from SVG shapes: a yellow circle for the head, two black circles for eyes, and a black arc for the mouth. The code uses D3 v7 selections and the `arc` generator from `d3-shape` to draw the mouth path, while CSS sets the page margin and hides overflow. All shapes are positioned relative to a centered `g` group, with explicit attributes for radius, spacing, and angles.

Ggabcee

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

88% match

Loading thumbnail…

Fork of data visulization

A yellow circle face with black eyes and an arc-shaped mouth is drawn in SVG. The code creates the face using d3 selections and attributes, setting the head as a large yellow circle, the two eyes as smaller black circles, and the mouth as a path generated with d3.arc using specified inner and outer radii and start and end angles. The visualization uses fixed pixel dimensions and demonstrates basic SVG shape construction with D3 v6.

AAkshay

86% match

Loading thumbnail…

Fork of Shapes with SVG and CSS

A yellow circle with black outline and a smile-shaped arc form a face, complete with two eyes and rectangular eyebrows. The eyebrows animate by translating up and down over two-second intervals using chained `transition` calls. Built with React and D3 v6, the visualization renders purely as SVG elements (circles, rectangles, and a path) styled partly through an external CSS file. The code explicitly sets SVG dimensions, uses `d3.arc` to generate the mouth path, and applies transforms to position facial features.

Hhortulanus

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

86% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows a yellow smiley face drawn with SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth—that animates through D3 transitions. The code uses d3 v5’s `select` and `append` methods to build the SVG hierarchy, with `transition()` and `attr` chaining to sequentially move the eyebrows and morph the mouth’s inner radius. The face is centered via a translation on a group element, and the mouth path relies on `d3.arc()` with changing `innerRadius` values. Styling is applied through CSS, while the animation logic is driven entirely by D3’s transition API.

Rrjohnson5016

85% match

Loading thumbnail…

Fork of Fork of Fork of d3js

This example renders a simple yellow smiley face using SVG elements created with D3 v5. The visualization shows a large circle for the face, two smaller black circles for eyes, and an arc path for the mouth, all positioned within an 960×500 SVG canvas. The code uses D3’s `select` and `arc` APIs, along with standard SVG attributes like `attr("r")`, `attr("cx")`, and `attr("cy")`, to construct the shapes. The mouth is generated via the `arc()` generator with specified inner and outer radii and angular extents.

Ssgm202

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

85% match