Hearts by Kareena

100%

Hearts by Kareena

✓ Published2🌍 Public

Last edited Aug 12, 2025

Created on Aug 11, 2025

A ring of eleven glossy, pink heart-shaped balloons floats and rotates in a dark 3D space, each heart gently pulsing and bobbing as if inflated or suspended. The animation is rendered with Three.js (r174) using its WebGL renderer, OrbitControls for camera damping, and custom extrude geometry with bezier curves and bevel settings to form the puffy hearts. A point light inside the center heart creates a glowing effect, while ambient and directional lights add depth and shine to the semi-transparent MeshPhongMaterial surfaces.

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Fork of Hearts by Kareena with Rainbow Colors

A cluster of eleven extruded 3D heart balloons, each tinted with a different rainbow color, floats and rotates in a dark Three.js scene. The hearts are arranged in a circle and pulse gently with a scaling animation, while a subtle point light creates a glowing effect. Built with Three.js's `Shape`, `ExtrudeGeometry`, and `MeshPhongMaterial`, the scene uses `OrbitControls` for camera interaction, with each heart animated via sinusoidal time-based transformations for rotation, scale, and vertical drift.

CCurran Kelleher

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

69% match

Loading thumbnail…

Fork of 3D Cube of Spheres

A 3D interactive model of a human heart built with Three.js and animated via requestAnimationFrame. The model uses color-coded spheres and cylinders to represent anatomical parts, including the left and right ventricles, atria, aorta, and pulmonary artery, each with an associated function. Users can orbit the heart using OrbitControls, and a mousemove event with Raycaster enables hover highlighting and logs part names to the console. The scene includes directional and ambient lighting, with a camera initial position of z=15.

NNita

66% match

Loading thumbnail…

3D Flower

This interactive 3D visualization presents a procedurally generated flower with twelve pink petals, a yellow center, curved green stem, and three leaves. The flower is built using Three.js geometries including ExtrudeGeometry for petals and leaves, TubeGeometry for the stem, and SphereGeometry with added stamen details for the center. WebGL rendering displays the scene with directional lighting and shadows, while individual petal containers receive subtle wave animations in the render loop. OrbitControls enable camera rotation and zoom, allowing exploration of the model against a sky-blue background with fog.

CCurran Kelleher

65% match

Loading thumbnail…

dd

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.

Rrdivyaa27@gmail.com

65% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A three-dimensional heart rotates continuously within a responsive SVG container, its layered shapes creating a sense of depth and volume. The animation, driven by an animation frame loop in D3.js, updates a rotation angle that shifts each of the 20 heart-shaped paths horizontally and vertically. D3's `select`, `rgb`, and SVG path rendering construct the visual, while React's `useRef`, `useEffect`, and `useState` manage the container dimensions and animation state. The heart's colors and stroke opacity vary by depth to enhance the 3D effect.

NNita

64% match

Loading thumbnail…

Orbiting Bodies

A stylized solar system animation built with D3.js renders a glowing central star surrounded by three orbital rings containing planets of varying sizes and colors. Each planet carries multiple moons that orbit independently, while the background features twinkling stars. The animation uses requestAnimationFrame to update positions over time, with planet coordinates calculated using trigonometric functions based on configurable speed and offset parameters.

CCurran Kelleher

64% match