Skip to main content
SimilarExport ZIP
100%

SMILE DEAR

✓ Published0🌍 Public
YYujin Chung
Last edited Aug 8, 2019
Created on Aug 8, 2019

This example demonstrates the use of SVG vector graphics within an HTML page, rendering a simple scene with a blue background. The visualization is built using the D3.js library version 5, specifically utilizing the `d3.select` API to target the SVG element and apply styling. The code uses a fixed 960x500 pixel viewport and sets the background color through the `style` method. The project structure includes a separate CSS file that removes default margins, and a bundled JavaScript file (`bundle.js`) that contains the main logic. The SVG canvas provides the rendering surface for whatever graphics are defined in the script.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley face with D3.js!

A smiley face rendered in blue SVG responds to interaction as its eyebrows move. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` to target the SVG element and apply styling directly. It imports specific D3 methods rather than the full object, showcasing modular usage. The face is built entirely through SVG elements, with no external data source, relying on D3’s selection and attribute methods to update the eyebrows dynamically.

MMiguel Vicente O. Santiago
78% match
Loading thumbnail…

Smile

A single black circle floats at the center of an SVG canvas, rendered against a white background. The example demonstrates a minimal D3.js setup within a React project harness, using the d3.select API to target the SVG element and d3.append to add the circle primitive. The circle’s radius is set to 200 pixels via the attr method, with no interaction or animation. The page is built from an HTML file that loads D3 v7.3.0 from a CDN, styled by a simple CSS file that removes body margins and hides overflow.

Sstanronin
77% match
Loading thumbnail…

svg-d3-smiley

A bare-minimum HTML page renders a static, yellow smiley face using SVG shapes and D3.js. The visualization places a circular face with two eyes, a nose, and a curved mouth directly onto the page through D3’s selection and attribute methods. The code relies on D3 v3 to append and style SVG elements, though it defines no data bindings or interactive behaviors. The file contains only the document skeleton and an inline script, making it a basic demonstration of drawing vector graphics programmatically with D3 and the SVG API.

AAndy Maes
77% match
Loading thumbnail…

Smiley Face with D3.js

This example uses D3.js to render a simple SVG smiley face on a red background. The code selects the SVG element and applies a red fill via `svg.style`, while CSS styles define yellow strokes for the face’s lines and paths. It is built with React and D3 v5, using the `select` API from the `d3` module. The visualization is minimal, focusing on basic SVG styling and D3’s selection method rather than data binding.

FFahimeh Saleh
77% match
Loading thumbnail…

Smile 😀: Exploring the SVG Canvas!

This example demonstrates a simple SVG smiley face constructed with basic geometric shapes. It shows how SVG elements—a pink circle for the head, green and blue ellipses for the eyes, and a brown path with an M and Q command for the mouth—can combine to form a recognizable illustration. The code uses plain SVG markup within an HTML document, referencing no external JavaScript libraries. Styling is applied via attributes like `fill`, `stroke`, and `stroke-width`, with the canvas defined by a 960x500 coordinate system. The project highlights SVG’s vector rendering approach, ensuring scalable, non-pixelated output.

JJessica Burns
76% match
Loading thumbnail…

smiley d3

This example demonstrates a minimal D3 version 6 setup using an SVG canvas to draw a large yellow circle that fills the viewport, centered at half the width and height of the 960×500 SVG element. The code selects the SVG with `d3.select`, reads its dimensions via `attr`, and appends a circle with `append('circle')`, setting radius, coordinates, and fill color. It relies on D3’s selection and attribute methods to position the shape, serving as a basic introduction to D3’s declarative graphics in a static, single-element visualization.

FForemost123
76% match
Loading thumbnail…

Fork of Hello HTML

This example draws a simple smiley face using Scalable Vector Graphics (SVG). It shows a large blue circle outlined in green for the face, with two smaller green circles serving as eyes. The drawing is rendered directly within an HTML page using inline SVG elements. The code sets the SVG canvas to 960 by 500 pixels and positions the circles using explicit x and y coordinates. The page uses minimal CSS styling to remove margins and hide overflow, and the approach is purely declarative, relying on the SVG markup rather than any JavaScript libraries or external data sources.

Sseanmdalrymple@protonmail.com
76% match
Loading thumbnail…

My Smiley Face using D3.js!

This example renders a simple smiley face in an SVG container using D3.js v5. The visualization draws a large red circle for the face, two small black circles for eyes, and an arc for the mouth, all positioned relative to the center of a 960x500 canvas. The code uses D3’s `select` to target the SVG element and `arc` to generate the mouth’s path geometry. The background is set to green via an external stylesheet, with the face elements created entirely through SVG primitives.

Aanushatod
76% match