Amr3bass

@Amr3bass·4 public vizzes

Fork of smiley face

The visualization displays a classic yellow smiley face centered on a black-stroked circular face, with two black circular eyes and a curved mouth formed by a thick arc. Built with React and rendered as SVG, the face is constructed using D3’s `arc()` generator to define the mouth’s inner and outer radii and angular range (from π/2 to 3π/2). The code uses React’s `ReactDom.render` to mount the SVG, with all positioning relative to the canvas center via a transform. The face’s dimensions are derived from the viewport’s width and height, ensuring the head fills the 960×500 space.

Jul 29, 2023

Loading thumbnail…

smiley face

This example renders a yellow smiley face using React and D3.js. It draws a face with a circle head, two eyes, and a curved mouth via an SVG path. The shape is constructed with D3’s `arc` generator for the mouth, while circles handle the head and eyes. Fixed numeric constants define offsets, radii, and stroke width, and the entire composition is centered inside a 960 by 500 SVG canvas.

Jul 29, 2023

Loading thumbnail…

Hello HTML

A minimal example demonstrates how to embed a static SVG circle inside an HTML page without any external libraries or data. The page renders a single `<circle>` element with a radius of 200 units inside an SVG canvas of 960 by 500 pixels, using only native HTML and SVG markup. The circle appears without a fill or stroke, as defined in the inline code, and the example focuses on the basic structure of an HTML document, including the `<!DOCTYPE html>` declaration and a `<body>` with zero margins. No JavaScript or data-binding APIs are involved.

Jul 29, 2023

Loading thumbnail…

Html

This example demonstrates a minimal HTML page containing a single SVG circle, rendered statically without any data binding or interactivity. The code uses the circle element’s `r` attribute set to 100 pixels, with no fill or stroke specified, so it appears as a black outline on a white background. The page structure follows basic HTML5 syntax, though the opening head tag is malformed, missing its closing angle bracket. The visualization serves as the simplest possible reference for embedding SVG shapes directly in a web document, with no external libraries or data sources involved.

Jul 29, 2023