100%

Double Helix

✓ Published0🌍 Public

Last edited Jul 31, 2025

Created on Jul 31, 2025

A DNA double helix rotates slowly in a purple void, its two helical strands formed from colored spheres connected by white cylindrical base pairs. The scene renders in real time using Three.js with WebGL, featuring smooth orbit controls for interactive viewing. The helix is generated procedurally from configurable parameters, with each strand offset by 180 degrees and colored via HSL values that shift along the vertical axis.

AI-generated description

DNA Double Helix 3D Visualization

A 3D interactive DNA double helix made with Three.js.

Features

Two helical strands with colored spheres
Connecting base pairs between strands
Smooth rotation and orbit controls
Responsive design

How to Run

Serve the project using a local HTTP server:

MIT Licensed

Similar vizzes

Loading thumbnail…

3D DNA HELIX Interactive

This interactive visualization depicts a stylized 3D DNA double helix, with two intertwined strands of colored nucleotide pairs (circles connected by lines) that continuously rotate and animate as the central axis twists. Mouse movement changes the helix’s torsion, altering the rotation speed and curve magnitude. The visualization is built with D3.js (version 3.5.5) and the underscore.js library, rendering via SVG. The code generates two sine/cosine-based strands, maps their 3D coordinates using linear scales for x, y, and depth (z), and updates the scene every 25 milliseconds using `setInterval` and D3’s selection/data-binding API, applying color fills from a predefined palette.

MMauricio García Benítez

80% match

Loading thumbnail…

3D DNA Helix

A 3D DNA helix animates in an SVG scene, with two intertwined strands of colored circles connected by short lines that rotate and twist over time. The visualization uses D3.js and Underscore.js to generate the helix’s coordinates from sine and cosine functions, updating every 25 milliseconds via `setInterval`. Mouse movement over the canvas adjusts the torsion parameter, changing the helix’s twist interactively. Circle size and opacity encode depth along the z-axis, while line thickness and opacity vary to suggest the spiral’s three-dimensional form.

Aadamhurst

76% match

Loading thumbnail…

3D DNA HELIX From Sequence

This animated visualization renders a DNA helix from a user-supplied text sequence, showing two intertwined strands that rotate over time. Each nucleotide is represented as a colored circle, with colors mapped via `d3.interpolateRainbow` based on the unique characters in the string, while connecting lines between complementary bases emphasize the helical structure. The code uses D3.js v5 with SVG elements, updating positions and scales through a `setInterval` loop that regenerates data and applies logarithmic z-depth scaling to simulate three-dimensional perspective. The animation highlights the sequence’s layout by encoding torsional rotation and opacity changes.

MMauricio García Benítez

76% match

Loading thumbnail…

DNA sequence

This visualization animates a synthetic DNA double helix, where each colored node represents a letter from a string of fake genes and pulses along a twisting, sinusoidal path over time. It shows the helix rotating continuously, with lines connecting complementary strands and opacity varying based on depth to suggest a 3D structure rendered in SVG. The code fires a `setInterval` to regenerate and update data every 25 milliseconds, using d3’s `scaleLinear`, `extent`, `range`, and `interpolateRainbow` for color mapping. React manages the component, with fragments wrapping the DNA sequence inside the app’s root element.

MMauricio García Benítez

70% match

Loading thumbnail…

Fork of DNA Animation

This animation depicts a stylized, two-stranded DNA helix constructed from a sequence of circles connected by smooth, colored paths. The parallel strands oscillate horizontally, and the connecting rungs are rendered as thick line segments, creating a simplified molecular representation. The visualization is built with D3 version 7, using its `line` generator and the `.join()` operation to efficiently update SVG circles, paths, and lines at 60 frames per second via `setInterval`. Two independently timed sine-wave functions drive the positional data for each strand.

TToly

70% match

Loading thumbnail…

3D Cube of Spheres

This visualization displays a 4x4x4 cube composed of 64 colored spheres, with a hue gradient varying across each axis and a gentle rotation animation over a dark, starry background. The scene is rendered in WebGL using Three.js, featuring perspective projection, directional and ambient lighting, and interactive orbit controls for rotating, zooming, and panning. The code organizes configuration parameters in a separate module and uses `THREE.SphereGeometry`, `MeshPhongMaterial`, and `OrbitControls` to construct and manipulate the 3D environment.

CCurran Kelleher

67% match

Loading thumbnail…

Fork of 3D Cube of Spheres

A 3D wireframe cube of sixty-four colored spheres rotates slowly in dark space, with each sphere's hue derived from its coordinate position across the cube's three axes. The piece uses Three.js with WebGL rendering and OrbitControls for interactive camera movement. A directional light and ambient light provide simple shading, while each sphere shares a common sphere geometry but uses a unique MeshPhongMaterial. The animation loop increments the cube's rotation along the X and Y axes each frame.

CCurran Kelleher

66% match

Loading thumbnail…

Fork of Fork of 3D Cube of Spheres

A ring of colored spheres orbits a central point within a dark 3D space, slowly rotating to reveal its circular arrangement. Built with Three.js, the visualization uses a WebGL renderer and a perspective camera with orbit controls for interactive exploration. Each sphere is positioned using sine and cosine trigonometry, and its hue is mapped to its index around the circle, creating a smooth rainbow gradient. The scene includes directional and ambient lighting, and user-controlled damping enables smooth camera movement.

CCurran Kelleher

66% match