100%

dd

✓ Published0🌍 Public

Last edited Aug 7, 2025

Created on Aug 7, 2025

A heart-shaped SVG path with the text "Divya Karthikeyan ❤️" following its curve creates an animated valentine. The heart pulses via a CSS heartbeat keyframe, while the text glows through a filter animation. Clicking anywhere triggers sparkle emojis spawned by JavaScript, and floating heart emojis drift in the gradient background. The visualization uses inline SVG `<textPath>` binding to the path, combined with CSS animations and DOM event listeners for interactivity, rendered in a static HTML page.

AI-generated description

Divya Karthikeyan Heart Shape

A beautiful animated heart shape with "Divya Karthikeyan" text following the heart's path.

Features

SVG heart shape with text path
Heartbeat animation
Glowing text effects
Interactive sparkle effects on click
Floating heart emojis
Beautiful gradient background

Click anywhere on the heart to create sparkle effects! ✨❤️

MIT Licensed

Similar vizzes

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

73% 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

72% 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

72% 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

70% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG path rendering and CSS animation. A single red heart-shaped path is drawn using the SVG `path` element with an arc command (`a`) and line commands (`l`). The path is animated with a CSS `@keyframes` rule named `pulse`, which scales the element between 1 and 1.2 over a 2-second infinite loop. The code uses raw HTML, CSS, and JavaScript within a minimal page structure, with the SVG embedded directly in the body. No external libraries are used, showcasing core web visualization techniques.

BBelma Besirevic

70% match

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

70% match

Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS1

A yellow circle face with SVG ellipses for eyes and a red smile is drawn over a red heart-shaped path. The code uses D3 v6 selections to append and style the circle, eyes, pupils, smile, and two smaller red heart ellipses as cheek decorations. The SVG template path provides the background heart shape, while d3.arc is imported but not used, with all rendering handled directly through SVG attributes in an HTML file.

Aanandamayeemodak

70% match

Loading thumbnail…

Heart D3

A smiley face built from SVG circles and rectangles in red on a blank canvas demonstrates basic DOM manipulation and animation with D3.js. The eyebrows shift upward over one second, then return to their original position over eight seconds using chained transitions. The code constructs elements by appending to groups, calculates positions from window dimensions, and leverages D3’s `select`, `append`, `attr`, and `transition().duration()` APIs, with a custom triangle symbol added via `d3.symbol()`.

Fferneyhoughedward@gmail.com

69% match