saikrishnareddymandala

@saikrishnareddymandala·5 public vizzes

smile

A cheerful smiley face rendered as an SVG using React and D3. The face consists of two eye circles, a yellow head, and a green stroke, with a red fill. The mouth is drawn as an arc using the `d3.arc()` API, with its inner and outer radii and start/end angles defining the curve. React manages the component structure, while D3 calculates the path for the mouth, and SVG elements handle the circles and path rendering.

Feb 21, 2022

Loading thumbnail…

new image

Halfway toward a smiley face, this SVG composition shows a large blue circle with a black outline as the face, alongside two smaller unfilled circles positioned as eyes. The rendering uses raw SVG markup within an HTML document, with explicit `cx` and `cy` coordinates and stroke widths to define shapes. No JavaScript libraries or data sources are involved; the visualization is static and generated entirely through inline SVG elements.

Feb 21, 2022

Loading thumbnail…

faded back smile

A smiley face rendered in React and D3 uses a white-to-black gradient for its face, with a contrasting khaki gradient for its stroke, eyes, and mouth. Built with an SVG canvas, the code employs `d3.arc` to define the mouth path, while React components structure the face elements. The face gradient and accent gradient are defined in SVG `defs`, producing a subtle, faded back effect.

Feb 21, 2022

Loading thumbnail…

eyebrow smile

A yellow smiley face with black eyes and a grin is drawn using D3.js v7. The animation raises and lowers the eyebrows repeatedly using `transition.attr` with a set duration. The face, eyes, and mouth are built with SVG shapes, while the arc generator creates the curved mouth. All elements are rendered in SVG and centered via a group transform.

Feb 21, 2022

Loading thumbnail…

black smile

This example displays a large smiley face in a black-and-white gradient, with khaki-colored eyes and a curved mouth, centered on an SVG canvas. The face’s fill and stroke use two linear gradients defined in SVG `defs`, while the mouth is drawn using a D3 `arc` generator with specified inner and outer radii. The component is built with React, rendered via `ReactDOM.render`, and computes all positions and dimensions as JavaScript constants. The chart demonstrates integrating D3’s shape utilities, such as `arc`, within a React-rendered SVG hierarchy.

Feb 20, 2022