Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of HTML Starter

Public visualization

Viewing a saved revision (read-only)

0ad747264e64458f828e918c3c27d5a4

Fork of Fork of HTML Starter

0 stars2🌍 Public
KKareena
Last edited Jul 17, 2025
Created on Jul 17, 2025

This animated visualization demonstrates a sine wave traveling across an HTML5 Canvas, with a horizontal center reference line and adjustable wave parameters for amplitude, frequency, and speed. The code uses the Canvas API’s `getContext('2d')` for drawing, `requestAnimationFrame` for smooth animation, and `addEventListener` with the window resize event to maintain a responsive canvas. The wave’s phase updates each frame, creating the motion effect against a white background with a subtle border and shadow.

AI-generated description

Animated Sine Wave

This project demonstrates a smooth animated sine wave using HTML5 Canvas.

Features

  • Smooth animation using requestAnimationFrame
  • Responsive canvas that adjusts to window size
  • Configurable wave parameters (amplitude, frequency, speed)