sivakaman (@sivakaman), VizHub

svg smile

A smiling face rendered in SVG shows two black eyes with white highlights that dart side to side, while a static arc forms the mouth. The animation uses chained `transition` calls on the eye highlight circles to shift their `cx` attributes over 1600 and 1400 milliseconds. Built with D3 v5, the code appends circles and a path using `d3.select`, `arc`, and shape helpers, with no external data source.

Jul 7, 2020

Loading thumbnail…

svg smile

A smiling face rendered in SVG shows two black eyes with white highlights that dart side to side, while a static arc forms the mouth. The animation uses chained `transition` calls on the eye highlight circles to shift their `cx` attributes over 1600 and 1400 milliseconds. Built with D3 v5, the code appends circles and a path using `d3.select`, `arc`, and shape helpers, with no external data source.

Jul 6, 2020

Loading thumbnail…

svg smile

A cheerful cartoon face appears as a yellow circle with black outline, two black eyes, and white pupils that shift side to side before settling. The mouth is drawn as an arc path using the d3 `arc()` helper with specified inner and outer radii. Built with d3 v5, the visualization renders entirely in SVG and uses chained `transition().duration()` calls to animate the pupils horizontally across each eye. The code selects elements with d3’s `select`, appends shapes with `attr`, and relies on the `arc` generator to create the curved smile.

Jul 6, 2020

Loading thumbnail…

svg smile

A yellow SVG smiley face with black eyes and white pupils sits centered on a dark background. The pupils animate horizontally via chained `transition.attr` calls, shifting right then left. A lower arc path, drawn using the `d3.arc` generator, forms the smile. The example uses `d3.select` and `d3.arc` from D3 v5, with hardcoded positions and radii, and transitions lasting 1200 and 1400 milliseconds.

Jul 6, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that greets the viewer with the text “Hello HTML” centered in a very large font. The page also logs “Hello JavaScript!” to the browser’s console. It demonstrates the basic structure of an HTML document, including a `<head>` with styling and a `<body>` with content, and uses the native `console.log` API for scripting. No external libraries or data sources are involved.

Jul 6, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that greets the viewer with the text “Hello HTML” centered in a very large font. The page also logs “Hello JavaScript!” to the browser’s console. It demonstrates the basic structure of an HTML document, including a `<head>` with styling and a `<body>` with content, and uses the native `console.log` API for scripting. No external libraries or data sources are involved.

Jul 6, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that greets the viewer with the text “Hello HTML” centered in a very large font. The page also logs “Hello JavaScript!” to the browser’s console. It demonstrates the basic structure of an HTML document, including a `<head>` with styling and a `<body>` with content, and uses the native `console.log` API for scripting. No external libraries or data sources are involved.

Jul 6, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that greets the viewer with the text “Hello HTML” centered in a very large font. The page also logs “Hello JavaScript!” to the browser’s console. It demonstrates the basic structure of an HTML document, including a `<head>` with styling and a `<body>` with content, and uses the native `console.log` API for scripting. No external libraries or data sources are involved.

Jul 6, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” in large, centered type, with a console message confirming that JavaScript is active. The page uses plain HTML markup and inline CSS for styling, and includes a script block that calls `console.log` to output “Hello JavaScript!” in the browser’s developer tools. It is a bare-bones starter template that demonstrates the fundamental structure of an HTML document without relying on any external libraries.

Jul 6, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that greets the viewer with the text “Hello HTML” centered in a very large font. The page also logs “Hello JavaScript!” to the browser’s console. It demonstrates the basic structure of an HTML document, including a `<head>` with styling and a `<body>` with content, and uses the native `console.log` API for scripting. No external libraries or data sources are involved.

Jul 6, 2020