Skip to main content
SimilarExport ZIP
100%

Dot Dot Dot Demo

✓ Published0🌍 Public
HHerst
Last edited Dec 7, 2017
Created on Dec 7, 2017

This demo shows a single yellow ellipsis of three dots rendered as large, thick-stroked text on a plain white background, centered on a 500 by 300 SVG canvas. The text uses the `textLength` and `lengthAdjust` attributes to control exact spacing and glyph distribution. The example relies on native SVG presentation attributes, including `stroke`, `stroke-width`, and `paint-order`, to create the outlined effect. It demonstrates basic text rendering in an inline `<svg>` element without any external libraries or data sources.

AI-generated description

Similar vizzes

Loading thumbnail…

Fun with &lt;text&gt;

This demo shows three different SVG techniques for giving `<text>` elements a white outline so they remain readable on varied backgrounds: two stacked text elements with a thick stroke, one text element using the `paint-order` attribute, and a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge` effects. A dark green backdrop provides contrast. The D3 v4 code includes zooming and panning via `d3.zoom`, and interactive controls adjust font size, stroke width, rotation, and other text properties. Users can set initial camera position and parameters through URL search parameters.

HHerst
76% match
Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees
75% match
Loading thumbnail…

Demo

This demo shows a simple yellow circle with a green outline rendered inside a fixed 100x100 SVG canvas. The visualization uses only inline HTML and CSS, with no JavaScript libraries or external data sources. The circle is positioned at the center of the SVG using the `cx` and `cy` attributes, with a radius of 40 and a stroke width of 4. It serves as a minimal example of static SVG rendering for a web page.

Ffaria.29.farheen@gmail.com
74% match
Loading thumbnail…

Demo

A simple static SVG visualization displays a single yellow circle with a green outline on a 100x100 pixel canvas. The example demonstrates basic HTML structure combined with inline SVG markup, requiring no external libraries or JavaScript logic. The circle is defined using core SVG elements (`circle`, `stroke`, `fill`) within an `svg` tag, showing how to render vector graphics directly in a webpage. The code serves as a minimal starter template for embedding SVG shapes in HTML documents.

Ssalim.mir@outlook.com
74% match
Loading thumbnail…

Fork of Hello HTML

This example displays a yellow circle with black outline and two small black dots on an SVG canvas. The circle is centered at (400, 350) with a radius of 100, while the dots represent eyes at (350, 320) and (450, 320). The code manually sets SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width` directly in the HTML markup, without using libraries or data sources. The rendering relies on inline SVG elements within a minimal HTML page structure.

SSAI VINAY NANDIGAM
72% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering and text output within a web page. It draws red and green circles, a yellow rectangle with a blue stroke, and an invalid triangle element, all inside a 960x500 SVG canvas. The code uses D3 version 7's `select` API to set the body text to "Hello D3 version 7." The visualization is pure SVG markup defined in static HTML, with no data source or dynamic interaction.

NNatália
72% match
Loading thumbnail…

Hello HTML

This example displays a yellow circle with a black outline and a single black dot at its center, resembling a simple face. The circle is drawn using the SVG `circle` element, with fixed `cx`, `cy`, and `r` attributes, and is rendered inside an inline `<svg>` block. The page uses HTML and CSS to define the layout, setting the body margin to zero and hiding overflow. No JavaScript or external libraries are involved; the visualization relies solely on static SVG markup.

GGianluca Gippetto
72% match
Loading thumbnail…

text example

This example demonstrates how SVG text elements can be positioned and anchored in different ways within a D3 v4 visualization. It shows three text strings placed at the same x-coordinate but with distinct text-anchor values (start, middle, end) and dx offsets, illustrating how alignment affects placement relative to the anchor point. The code also includes a simple circle with a CSS class that applies a hover effect, increasing its radius and stroke width. Using D3's selection and append methods, the visualization creates an SVG canvas and populates it with static text and a single interactive dot.

335degrees
71% match