Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Dec 9, 2024

Created on Dec 9, 2024

This example constructs a simple smiley face using SVG circle elements, with a yellow head, black outline, and two dark eyes positioned symmetrically. The code directly sets coordinates and radii for each circle within an SVG canvas. It includes a force-directed graph implementation using `d3.forceSimulation` with link and charge forces, rendering nodes as draggable steelblue circles connected by gray lines. The visualization demonstrates basic SVG shape styling alongside interactive D3 drag behavior and simulation tick updates.

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

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

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.

Mmatthamm@yahoo.com

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the first step in building a smiley face with SVG shapes: a yellow circle for the head and two smaller circles for eyes, all positioned on a 960×500 canvas. The code uses raw SVG elements (circle) with attributes for coordinates, radius, fill, and stroke, rendered directly in the HTML. It includes commented calculations for centering elements, and the face remains incomplete—missing a mouth—as indicated by the README. The visualization is static, with no JavaScript interactivity or data binding.

Jjason.borucki.m@gmail.com

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a simple smiley face built from three SVG circles: a large yellow face with a black outline and two smaller empty circles for eyes. The code uses plain SVG elements rendered inline in an HTML document, with the `circle` tag for each shape. It runs on D3.js version 3, though no D3-specific API calls appear—just static SVG markup. The face is centered on a 960x500 canvas, with the face positioned at (480, 250) and eyes at (360, 220) and (600, 220). The example demonstrates basic geometric composition without interactivity or animation.

KKrishna2752

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of a face-building tutorial uses an SVG drawing to show a simple smiley face: a yellow circle with a black outline and two smaller circles for eyes. The code specifies the SVG width and height directly, positioning each shape with explicit `cx` and `cy` coordinates, such as the face at (480, 250) with a radius of 245. It renders using the SVG API within an HTML document, with CSS to remove page margins and hide overflow. The example demonstrates static SVG shapes without interactive behavior or additional D3 features.

NNeeraj Verma

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face constructed from three SVG circles: a large yellow head and two smaller eyes. The face is centered in an SVG canvas, drawn with a black stroke. The code uses basic SVG elements (`circle` tags) within a manually authored `svg` markup, with inline styling for body margins and overflow. No JavaScript libraries or data sources are involved; the visualization is purely declarative HTML/SVG, as seen in the static `index.html` file.

Oognyvrac

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles on a yellow background. The face is centered in a 960 by 500 pixel canvas, with two eye circles positioned symmetrically around the center. The code directly uses the SVG API for rendering, setting circle attributes like `cx`, `cy`, `r`, `fill`, and `stroke` inline within the HTML. No external JavaScript libraries are used; the visualization is purely static, with all geometry and styling defined in the markup. The face appears as a basic, fixed illustration without animation or interaction.

NNdip Estaban

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a simple smiley face using SVG primitives inside an HTML page. It shows a large yellow circle with a thick black stroke as the face, alongside two smaller black circles positioned for the eyes. The code directly constructs the `<circle>` elements within a 960-by-500 SVG canvas, using explicit `cx`, `cy`, and `r` attributes to place each shape. No JavaScript libraries are used; the rendering relies solely on static SVG markup.

MMatthewNunes

91% match