Skip to main content
SimilarExport ZIP
100%

Heart-Shaped Hole

✓ Published0🌍 Public
CCora
Last edited Apr 2, 2025
Created on Jan 29, 2025
Forked from Fork of Hello HTML

This example shows a solid gray circle with a heart-shaped hole cut out of its center. It uses an SVG `<mask>` element, where a white rectangle reveals the circle and a black heart-shaped `<path>` hides that portion. The heart is drawn using quadratic Bézier curves, and the mask is applied to the circle via the `mask` attribute in inline SVG. The code runs directly in a bare-bones HTML page without any external JavaScript libraries.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Masks

This example shows how SVG masks can punch a heart-shaped hole through a solid red circle, leaving the surrounding area visible. A `<mask>` element defines the cutout using a black rectangle for invisible regions and a white path for the visible heart shape. The mask is applied to a `<circle>` via the `mask` attribute, with the heart path drawn using an SVG arc and quadratic Bézier commands. The page is plain HTML with inline CSS and JavaScript, requiring no external libraries.

Jjhrdt
85% match
Loading thumbnail…

heart

A heart-shaped face is drawn in SVG, with a yellow circular head, black-outlined eyes featuring white and black pupils, and a curved mouth formed as an arc. The visualization is built using D3.js v5, rendered through SVG elements, with the code importing `select` and `arc` from the D3 library. The example demonstrates programmatic creation of shapes and attributes, using the SVG viewport dimensions to scale features relative to the canvas.

KK V VINITHA
75% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG rendering and interactivity using a simple heart shape drawn with SVG path commands. The heart’s geometry is defined with arcs and quadratic Bézier curves within a 100×100 viewBox, while CSS handles layout centering and a hover effect that scales the shape and changes its fill color. The code uses inline SVG elements and CSS transitions for smooth animations. It shows how basic vector graphics can be created and styled without additional libraries, relying purely on the browser’s native SVG and CSS support.

IIndranil Biswas
73% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how to render a custom SVG path on an HTML page using inline SVG markup. The code draws a single heart-shaped figure with a red fill and stroke, constructed through a combination of arc commands, quadratic Bézier curves, and a closing path segment. It uses only native SVG elements and attributes within an HTML document, with no additional JavaScript libraries or frameworks required. The visualization serves as a minimal introduction to creating vector graphics directly in the browser, highlighting the path command syntax for defining complex shapes.

DDuke Nguyen
72% match
Loading thumbnail…

Fork sol assignment

This example renders a heart-shaped cutout through a grid of horizontal and vertical lines using raw JavaScript and SVG. The code creates two masks: the first punches the heart shape out of the background, revealing a set of overlapping horizontal rectangles behind it. The second mask highlights the same heart shape in front of the vertical lines, creating a layered, intersecting pattern. Both heart paths rotate 360 degrees in alternating directions via CSS keyframe animations.

KKerim
71% match
Loading thumbnail…

Untitled

This example renders a single red heart symbol composed of two curved paths and a vertical line, drawn inside an SVG element. The heart is defined in a `<defs>` block and reused via an `<use>` tag with the `xlink:href` attribute. It demonstrates basic SVG styling, including a red fill and black stroke, and is accompanied by a small D3 script that imports the `select` function to set text content in a separate div, alongside a local ES6 module exporting the message.

Ppallavipawar2618
70% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG path syntax for drawing custom shapes. It renders two red stroked paths on a 200x100 viewBox using the `d` attribute with arc commands (`A`, `a`), quadratic Bézier curves (`Q`, `q`), and line segments (`M`, `h`). The first path forms a stylized heart-like shape composed of arcs and curves, while the second builds a smaller abstract form from repeated arcs and an open quadratic tail. The code uses plain SVG within an HTML page, with no external libraries or data sources.

WWiebke
70% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape rendering in an HTML page. It shows overlapping circles in red and green, a navy line, a complex path forming a heart-like curve, and a black path with a relative coordinate segment. The code uses raw SVG elements—`circle`, `line`, and `path`—within an `<svg>` tag, with styles controlled by inline attributes like `fill`, `stroke`, and `stroke-width`. The page hides the body margin and overflow, and the drawing is fixed at 960 by 500 pixels, with no external libraries or data sources.

Yyholly
70% match