Skip to main content
SimilarExport ZIP
100%

Heart Birthday

✓ Published0🌍 Public
SSam Hege
Last edited Jun 27, 2022
Created on Jun 27, 2022
Forked from HTML Starter

This example displays a single heart image centered on a blue background. The page uses CSS Grid with `place-items: center` and a full viewport height to position the image, which has a white background, border radius, and a subtle box shadow. It is a minimal HTML and CSS demonstration, relying on an external PNG asset from NicePNG with transparency, and does not use JavaScript or a framework despite the React metadata.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Heart with D3.js

This example renders a fixed heart shape using an inline SVG path, overlaid on an HTML page via an `<object>` element that references an external SVG file. The D3.js library is imported in `index.js` to select the SVG and read its width and height attributes, though no dynamic data binding or animation is applied. The visualization demonstrates how D3 can be paired with static SVG content in a React-oriented workflow, with the heart path defined in red and black stroke styling within the SVG markup.

AAloysius
69% match
Loading thumbnail…

Fork of HTML Starter

A single red heart dominates the center of an SVG canvas, rendered as a filled path with a red stroke and transparent fill. The heart shape is defined by two arc commands and two quadratic Bézier curves, which create its symmetrical upper lobes and pointed bottom. The SVG uses a viewBox of 0 0 100 100, while the surrounding HTML sets the body font size to 13em for dramatic scaling. This is a minimal, static visualization built with plain HTML, CSS, and inline SVG, with no JavaScript libraries or data sources involved.

Sshaji K
68% 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
67% match
Loading thumbnail…

Heart

A large yellow smiley face rendered with SVG. The face is centered on the screen, with its radius and the positions of the eyes and mouth calculated from the window dimensions. The code uses React and ReactDOM to draw the face, composing a circle for the head and two smaller circles for the eyes within a single SVG element. The stroke width and eye offset are predefined constants, and the face is positioned using an SVG transform.

Fferneyhoughedward@gmail.com
67% match
Loading thumbnail…

Fork of Rotating Buddha

A large red heart sits centered on a black background, rendered with smooth SVG paths and a radial gradient that gives it a soft, three-dimensional glow. Built with React and SVG, the heart uses a drop-shadow filter for a subtle red halo and scales slightly when hovered. The page is coded in JavaScript with JSX, using React 18's `createRoot` and basic CSS transitions for the interactive effect.

NNita
66% match
Loading thumbnail…

Heart-Shaped Hole

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.

CCora
65% match
Loading thumbnail…

Hearts

A cluster of eleven glossy pink heart-shaped balloons floats in dark space, each rotating independently while gently pulsing and bobbing. Three.js builds the hearts from a 2D bezier curve shape, extruded with bevels for a puffy volume, and applies a semi-transparent, emissive Phong material. OrbitControls enables viewer rotation. An animation loop adds continuous rotation, sinusoidal pulsing scale, and vertical drift, while a point light moves with the central heart to create a glowing effect.

KKareena
65% match
Loading thumbnail…

Beating Heart Visualization

This animated heart visualization displays a red heart shape that rhythmically beats against a blue rectangular background. Rendered as inline SVG, the heart path is defined using a cubic bezier path, while an SVG `<animateTransform>` element scales it repeatedly between sizes of 1 and 1.5 over a one-second cycle. The animation uses the `scale` transform type with specified keyframe values to create the pulsing effect, with no external JavaScript libraries or data sources involved.

RRidhima Saxena
65% match