circles

SVG Fundamentals

This example demonstrates how to create basic SVG shapes using D3 version 6, showing a simple face constructed from circles with white and black fills. The code defines a static SVG scene with a large outer circle for the head, and smaller circles representing eyes with pupil details. It uses native SVG elements such as `circle` and attributes like `cx`, `cy`, `r`, and `fill` directly in the HTML markup, with no JavaScript logic or data binding. The rendering relies purely on SVG’s built-in drawing capabilities within an inline HTML document.

Jjgbalderramar

Let's make a face!

This visualization uses D3.js to draw a simple face-like composition directly onto an SVG canvas. The example demonstrates basic SVG shape manipulation by applying a brown fill color to circular elements, as shown in the CSS class `.circle`. The code imports `select` from D3 to interact with the DOM and uses ES6 modules to organize functionality, with an HTML page containing a 960x500 SVG container. The rendering approach is SVG-based, and the example serves as a minimal introduction to combining D3 selections with modular JavaScript for static graphical output.

Pphongbui81062

Let's make a face!

Pphongbui81062

Let's make a face!

Pphongbui81062

A Circle

This example displays a static SVG composition of a blue circle with a black outline, two smaller inner circles positioned as eyes, and a path element intended as a mouth, suggesting a partial smiley face. The drawing uses explicit pixel coordinates for the circles within an SVG canvas. The code briefly loads D3 v7 and prepares to select the SVG element, while a separate JavaScript snippet imports `select` and `arc` from D3, appending a group and defining a path with an arc generator that specifies inner and outer radii and start and end angles, though the arc itself is not visibly rendered in the final output.

Ppreethamkesa

hello

This example shows a simple SVG composition of three black-and-yellow circles arranged to suggest a face, rendered directly in an HTML page. It uses raw SVG markup with `<circle>` elements, specifying positions, radii, fill colors, and stroke properties. The page is styled with CSS to remove margins and hide overflow. The visualization is static, with no interaction or animation, and relies solely on inline SVG attributes rather than any JavaScript or external libraries. The data source is the hardcoded coordinates and sizes within the markup itself.

Wwalkingwang

Hello World

This example shows a simple static SVG illustration of a face made from three circles: a large dark blue circle for the head and two smaller dark green circles for eyes, all with black outlines. The rendering uses plain SVG elements embedded in an HTML file, with CSS styling to remove page margins and hide overflow. The code defines the circles directly in markup with explicit coordinates and stroke properties, requiring no JavaScript or external libraries to render the graphic.

ZZivGrin

making a face

A simple static face built with SVG primitives in an HTML page. The graphic shows a yellow circle as the head with black outlines, and two smaller filled circles as eyes, arranged symmetrically on a 960-by-500 canvas. Using inline `<circle>` elements, the code sets explicit coordinates and radii for each shape, with no interactivity or animation. The example demonstrates basic SVG markup and styling directly in HTML, with margins removed via CSS for a clean, full-viewport presentation.

Llassori3@gatech.edu