Skip to main content
SimilarExport ZIP
100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public
Mmatthamm@yahoo.com
Last edited Aug 4, 2024
Created on Aug 4, 2024

This example shows a static smiley face constructed from three SVG circles on a yellow background. D3 is not used; instead, the code directly sets circle positions with hard-coded coordinates and attributes, including a thick black stroke outlining the face. The rendering uses plain SVG within an HTML page, with the face centered at (480, 250) and eyes placed symmetrically around it. The title references a tutorial series, but the visible behavior is only a non-interactive, two-eyed face without a mouth.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face constructed with three SVG circles: a large yellow head with a black outline, and two smaller unfilled eyes. The code uses plain SVG elements inside an HTML page, with coordinates and stroke widths positioned explicitly via the `cx`, `cy`, `r`, and `stroke-width` attributes. No JavaScript libraries or D3 APIs are required; the rendering depends entirely on the browser’s native SVG support. The data is hard-coded in the markup, and the visual output is a simple, geometric face that stops halfway toward a smile.

MMaria
96% match
Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example shows a static smiley face built from three basic SVG shapes: two eyes and a head drawn with circles. The code uses raw SVG elements via D3 v3 syntax, though it relies on plain HTML markup rather than D3 data joins. The face is centered within an SVG canvas sized 960 by 500 pixels, with the head filled yellow and outlined in black, while the eyes remain unfilled. The rendering approach is simple declarative SVG, with positions explicitly set as pixel coordinates for each circle.

990561lkk
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static yellow smiley face drawn with three SVG circles: one large circle for the head and two smaller circles for the eyes, all centered on a 960-by-500 canvas. The head uses a yellow fill with a black stroke, while the eyes are plain black circles. The code relies solely on raw SVG elements—`<svg>`, `<circle>`, and their attributes—without any JavaScript libraries or D3.js functions. The rendering is built directly in the HTML file, with no data source or dynamic behavior; it simply displays the face as a fixed visual composition.

Ffmparantean@yahoo.com
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static yellow smiley face drawn with three SVG circles: one large circle for the head and two smaller circles for the eyes, all centered on a 960-by-500 canvas. The head uses a yellow fill with a black stroke, while the eyes are plain black circles. The code relies solely on raw SVG elements—`<svg>`, `<circle>`, and their attributes—without any JavaScript libraries or D3.js functions. The rendering is built directly in the HTML file, with no data source or dynamic behavior; it simply displays the face as a fixed visual composition.

Ffmparantean@yahoo.com
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically on either side. The rendering relies on raw SVG elements inside an HTML document, using circle attributes for coordinates, radius, and styling. No JavaScript libraries or data sources are involved; the code directly defines the geometry and appearance. It serves as a basic demonstration of SVG shape composition.

KKing
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face created with basic SVG shapes. The code draws a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes, all placed within an SVG element. It does not use any JavaScript libraries, relying instead on the D3.js version 3's underlying SVG support, but the data visualization is purely declarative HTML. The entire composition is centered on an 960x500 canvas, with explicit coordinates for the head and eye positions.

AArvind Chauhan
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face drawn with two outer circles and two eye circles, built from raw SVG markup inside an HTML page. The face is centered on a 960 by 500 canvas, with a yellow head stroked in black and two smaller black circles for eyes. The code uses no JavaScript libraries or D3 APIs; instead, it relies entirely on inline `<circle>` elements and SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The rendering approach is direct SVG, with the page styled to hide margins and overflow.

MmwellsSFMC
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles on a yellow face, with two black eye circles positioned on either side of the center. The face is drawn using raw SVG elements—a yellow `<circle>` with a black stroke, and two unfilled `<circle>` elements for the eyes—all laid out on a 960-by-500 canvas. No JavaScript libraries or animation logic are present; the effect relies entirely on the SVG markup and CSS resets to remove page margins. The rendering is purely vector-based, with coordinates hard-coded into the HTML file.

SSebastian Ruggero
94% match