Circle with Triangle

100%

Circle with Triangle

✓ Published0🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

A blue circle filled via the Canvas 2D API’s `arc` and `fill` methods forms the backdrop for a red triangle drawn with `moveTo`, `lineTo`, `closePath`, and `fill`. Both shapes are rendered on a 400×400 canvas element in an HTML page, with no external libraries or data sources. The example demonstrates basic geometric drawing and color fills using native JavaScript canvas commands.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundmamentals

This example demonstrates fundamental SVG shapes—a red circle, a blue-stroked light blue rectangle, and a light green triangle—arranged on a 960-by-500 canvas. It functions as a static, hand-coded HTML document using raw SVG elements (`circle`, `rect`, `path`) without external libraries. The path uses the `d` attribute with absolute coordinates (`M`, `L`, `z`) to draw the triangle, and each shape directly specifies its fill, stroke, and stroke-width attributes, showcasing basic vector rendering principles.

RRyanYun0017

73% match

Loading thumbnail…

Circles with Canvas

A set of circles in various colors and sizes appears on a pale green background, demonstrating how D3 can work with the Canvas API for high-resolution rendering. The visualization uses hardcoded data points for circle positions, radii, and fills. The code imports `select` from D3 and manually draws each circle using the Canvas `beginPath`, `arc`, and `fill` methods. It also scales the canvas context by the device pixel ratio to ensure crisp shapes on hi-dpi displays.

CCurran Kelleher

71% match

Loading thumbnail…

Circles

A single grey SVG canvas displays one yellow circle centered within a red-bordered frame. The circle is drawn using the SVG `<circle>` element with a green stroke and a radius of 200 pixels, positioned relative to the canvas width and height. The example demonstrates basic SVG shape rendering in a plain HTML page using CSS for styling and inline SVG markup, with no JavaScript libraries or frameworks involved.

AAlim Bolar

71% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes by drawing a single black triangle using a path element within an 800-by-800 pixel SVG canvas. The triangle is defined with the `d` attribute specifying coordinates from a starting point at (100,75) through (50,150) and (150,150), closed with the `z` command. The path uses a 5-pixel black stroke with rounded line joins and a black fill. The HTML includes commented-out concentric circles that illustrate alternative shape techniques, though only the triangle renders in the final output.

BBen-Chamberlain

71% match

Loading thumbnail…

Circle and Ellipse

This example showcases a set of geometric shapes—circles and ellipses—arranged in a framed SVG canvas. The visualization presents various configurations, including a large circle, a small circle, and horizontally and vertically oriented ellipses, all filled with a steelblue color. The code uses D3.js v5 to select the SVG element and append each shape, setting attributes like center coordinates (`cx`, `cy`), radii (`r`, `rx`, `ry`), and a styled border. A black rectangular frame is drawn using a path, and the rendering is done entirely through SVG. The data source is not specified, as the shapes are manually defined in the script.

CChooo4u

71% match

Loading thumbnail…

Trembling triangle #2

An animated triangle on a canvas trembles and morphs as it fills with shifting, warm-colored bands. The rendering uses a D3 v4 timer loop to drive the shape’s jitter, with the triangle’s edges recursively subdivided to create fractal depth. Each frame, the canvas is cleared, and ten offset triangle paths are drawn in sequence with semi-transparent fills, producing a shimmering, layered effect. The code employs `d3.randomNormal`, `d3.scaleLinear`, `d3.interpolateWarm`, and the Canvas 2D API to generate the motion and color.

EEndNight95

70% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—a circle, a rectangle, and a line—positioned on a 900-by-450 pixel canvas with a visible black border. The circle is stroked with blue and unfilled, the rectangle is filled green with a blue outline, and the diagonal line is drawn in red. The code uses raw SVG markup embedded directly in an HTML document, specifying coordinates, dimensions, and colors via attributes like `cx`, `cy`, `r`, `width`, `height`, and `stroke-width`. No JavaScript libraries are employed; all rendering is handled natively by the browser's SVG engine.

AAshwani Sajwan

70% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates raw SVG shape drawing within a web page. It shows a blue circle, a second black circle, and a thick navy diagonal line rendered on a 960 by 500 canvas. The code uses the standard SVG elements `circle` and `line`, defining their positions with `cx`, `cy`, `r`, `x1`, `y1`, `x2`, and `y2` attributes. Colors and stroke width are set directly via the `fill`, `stroke`, and `stroke-width` presentation attributes, with no external data or scripting involved.

IIlyas Filali

70% match