Skip to main content
SimilarExport ZIP
100%

Animated Stop Watch

✓ Published1🌍 Public
JJohn A. Dodge
Last edited Oct 14, 2025
Created on Oct 12, 2025
Forked from Stopwatch

An animated digital stopwatch displays hours, minutes, and seconds in the Share Tech Mono font, with the final two digits cycling between grass green and tree green. The time is generated live with d3.format; two pairs of eyes sit between the colons, and JavaScript tracks mouse position to move their pupils via CSS transitions. The animation uses keyframes for the color shifts and runs on a black background for contrast.

AI-generated description

Animated Stopwatch

This stopwatch animates the seconds digits with grass and tree green colors, creating a smooth transition between the two shades.

The two eyes represent big brother always watching.

Features

  • Digital display with Share Tech Mono font
  • Hours, minutes, and seconds format (HH:MM:SS)
  • Last two digits (seconds) animate between grass green (#7CFC00) and tree green (#228B22)
  • Clean, centered display with black background for better contrast
  • Eyes positioned between the colons with pupils that follow the mouse cursor
MIT Licensed

Similar vizzes

Loading thumbnail…

Big Brother Animated Stop Watch

A large digital stopwatch displays elapsed minutes and seconds in a glowing green monospace font, with the seconds digits pulsing between two shades of green. The two colon separators are transformed into cartoonish eyes whose pupils track the mouse cursor, smoothly following its movement across the screen. Built with D3.js v6 for time formatting and DOM selection, the animation relies on CSS keyframes for the color shift and JavaScript event listeners to calculate pupil positions via trigonometric functions.

JJohn A. Dodge
88% match
Loading thumbnail…

Stopwatch

A digital stopwatch displays elapsed time in hours, minutes, and seconds, updating every second with a monospace font. The page uses D3.js selection and formatting APIs—specifically `d3.select` and `d3.format`—to update the text content of the body element. A `setInterval` callback increments a counter each second, and the formatted time is rendered as a colon-separated string.

CCurran Kelleher
76% match
Loading thumbnail…

Animated Clock

A stylized clock face displays twelve tan, rounded arc segments for the hour positions, with black hour and minute hands rotating continuously. The animation uses SVG `animateTransform` elements to rotate the hands at different speeds, completing a full revolution every 60 seconds for the minute hand and every 720 seconds for the hour hand. D3.js version 6.6.2 generates the arc paths and labels using the `d3.arc()` generator with `centroid()` positioning, while the white tick marks are static SVG lines rotated around the center.

Jjabowen2020@gmail.com
75% match
Loading thumbnail…

Fork of Animated Clock

This example shows an animated clock that ticks through an entire day at 60 times normal speed. The clock face is rendered as twelve distinct SVG arcs, each representing an hour and styled with a tan background, while the hour and minute hands rotate continuously via D3.js. A sky-blue gradient background with drifting white clouds—animated via CSS keyframes—creates a playful, dynamic scene. The code leverages D3’s arc generator to draw the hour segments and positions the hour labels, with the entire clock centered and scaled to the viewport.

66264kusuma@gmail.com
72% match
Loading thumbnail…

Stopwatch

This example shows a functional stopwatch application with a large digital time display and two buttons, one to toggle between Start and Stop states and another to Reset the timer. The interface is built entirely from reusable components defined with d3.component, and the app’s state is managed through Redux actions like START, STOP, and RESET. The time display updates continuously via d3.timer when running, and the visual formatting converts elapsed milliseconds into hours, minutes, seconds, and centiseconds using d3.format.

CCurran Kelleher
70% match
Loading thumbnail…

Multicolored Clock

The Multicolored Clock visualizes time as a nested set of seven animated arc segments, each representing seconds, minutes, hours, day, date, month, and a static credit ring. The arcs smoothly transition every second using elastic easing, with colors interpolating across an HSL spectrum based on each unit’s current value via a linear scale. Built with D3 v3, it uses `d3.svg.arc`, `attrTween` for value interpolation, and `textPath` to label each ring. Data is generated live from the JavaScript `Date` object, rendered as SVG with continuous animation.

MManinder Singh
70% match
Loading thumbnail…

Countdown

This visualization displays a real-time countdown to 9 AM the following day, rendered as large monospaced text in the center of the page. The code uses d3.time.format to produce a timestamp string, d3.time.day and d3.time.day.offset to compute the deadline, and d3.time.second to calculate the remaining time. A recursive tick function updates the text every second using setTimeout, refreshing the display with the current difference between the deadline and the present moment.

Mmbostock
70% match
Loading thumbnail…

Retro Clock

A retro-styled animated clock displays a series of date-time strings, each formatted as "08h15 01.07.2022". The visualization cycles through these markers every second, showing how characters rotate in and out of a rectangular frame using a D3 mask. Built with D3 v7, the SVG text elements transition vertically via `transition.attr()` to simulate a mechanical flip-clock effect. The string data is hardcoded in the script, and the clock aligns to the right within the canvas layout.

Sscheenmi@gmail.com
70% match