Skip to main content
SimilarExport ZIP
100%

Eyes!

✓ Published0🌍 Public
Kkaviya-ds
Last edited Aug 5, 2020
Created on Aug 5, 2020
Forked from HTML Starter

This example renders a pair of cartoon eyes using basic SVG shapes. Two white ellipses form the eye outlines, with brown circles for irises and smaller black circles for pupils, all positioned statically on a 500×500 canvas. The visualization demonstrates manual coordinate placement and shape styling through D3 v5 selection methods like `svg.append` and `.attr` within a React framework, outputting directly to SVG elements.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG and CSS

This example creates an animated SVG face using React and D3 v5. The visualization shows two large eyes and eyebrows rendered as circles and rectangles within a yellow circle on a black stroke, with a smile drawn using an arc path. The eyebrows animate upward and back down over two seconds via chained `transition()` calls that modify the group’s transform attribute. The code imports `select` and `arc` from D3 to manipulate SVG elements and generate the mouth shape, all within a fixed 960x500 canvas.

PPraneeth Varma
80% match
Loading thumbnail…

Just the eyes

A yellow circle fills the viewport, framed by a thick black outline, with two smaller black circles positioned near its upper center to suggest a pair of eyes. The visualization is built with React and rendered as inline SVG, using hard-coded coordinates and radii for each circle. It relies on React’s `ReactDOM.render` to mount the component, demonstrating a minimal, code-driven approach to static shape composition.

Ttobyviz
80% match
Loading thumbnail…

Data Visualization

A red circular face with black outlines is rendered in SVG, featuring exaggerated cartoon eyes and a wide smiling mouth. The visual is composed of two React components, `Eyes` and `Smile`, which are nested inside an SVG element created with React and ReactDOM. The components use SVG ellipses, paths, and circles to draw detailed, stylized facial features, with the overall layout positioned and scaled using SVG `transform` attributes.

PPriyakongani
80% match
Loading thumbnail…

D3.js Starter

This interactive React visualization renders a stylized face using SVG primitives. A radial gradient defines the head's golden shading, while D3.js v5's `line()` and `curveCardinal()` functions from the `d3-shape` component construct the eye shapes. The custom `eyeGeneratorCurve()` function coordinates curve paths based on calculated distances between points. Each eye is drawn as a closed path with filled white interiors and black strokes, positioned within a translated group. The application manages state and rendering through React's component system, with the SVG canvas sized at 400 by 400 pixels.

VVikil Lakkavatri
79% match
Loading thumbnail…

Let's make a face!

This example draws a simple cartoon face using D3 v5 within a React application, rendering to SVG. The code uses `d3.select` and `d3.arc` to construct a yellow circle for the head, two circles for eyes, and a path for the mouth. The face is centered by translating a group element to the middle of an SVG sized 960 by 495 pixels. Eye positions are fixed offsets from the center, and the mouth uses an arc with specified inner and outer radii. The visualization demonstrates basic SVG shape creation and transformation without external data.

WWRCIECH
79% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes forms a simple cartoon face in an SVG canvas using D3.js v6. The code draws the head and eyes with `select` and `append` circle attributes, while a mouth is rendered using the `d3.arc` generator with specified inner and outer radii and an angle range of PI. The face is centered using the SVG width and height, and the eyes are positioned with fixed offsets. All shapes are directly manipulated through D3 selections in a React starter setup.

FFertsman
79% match
Loading thumbnail…

Shapes with svg

This example uses D3.js to draw a yellow circle with a black stroke on an SVG canvas, representing a face with a single black eye. The code appends SVG circle elements using D3 selections, setting attributes like radius, center coordinates, and fill colors directly. The circle’s size and position are derived from the SVG’s width and height attributes, while the eye is positioned relative to those dimensions. The visualization demonstrates basic SVG shape creation and attribute manipulation through D3’s `select` and `append` methods.

TTrustPaul
78% match
Loading thumbnail…

svg

This example shows a simple SVG face composed of a large yellow circle with a black outline and a smaller black circle representing an eye, centered on a 960×500 canvas. The code uses D3 v6’s `select` and `append` methods to create SVG elements, reading dimensions from the `width` and `heigth` attributes of the root `<svg>` element. The `heigth` attribute is misspelled in the HTML, but the JavaScript accesses it consistently, demonstrating basic SVG drawing with D3 selections and attribute chaining.

NNicolás Romero
78% match