Algorithm Visualizations

Watch algorithms come to life through pure CSS

Algorithm Visualizations

Select an algorithm to see it come to life through CSS

Bubble Sort

Compare adjacent elements and swap if in wrong order

O(n²)

Algorithm Steps:

  1. Compare first two elements
  2. If first > second, swap them
  3. Move to next pair and repeat
  4. Largest element "bubbles" to the end
  5. Repeat for remaining elements

Bubble Sort — pure HTML + CSS visualization

Fixed example array: [5, 3, 8, 1, 6]. This single-file demo uses only HTML and CSS. The animation changes each element's order in steps to show how bubble sort swaps values until sorted.

5
3
8
1
6
Animation: bubble sort passes (looped)

Binary Search

Find target (65) by halving the search space

O(log n)

Algorithm Steps:

  1. Start with sorted array, find middle (50)
  2. If target (65) > middle, discard left half
  3. If target < middle, discard right half
  4. Repeat until found
  5. Target found at index 4!
10
25
35
50
65
75
85
95

DFS Tree Traversal

Explore depth-first: go deep before siblings

O(V+E)

Algorithm Steps (Pre-Order Traversal):

  1. Start at root A, mark visited.
  2. Visit first child B (go left).
  3. Visit B's child D (deeper).
  4. Backtrack to B, visit E.
  5. Backtrack to A, visit C.
  6. Visit C's children F and G.
  7. Order: A → B → D → E → C → F → G
A#1
B#2
C#5
D#3
E#4
F#6
G#7
Traversal Order: A → B → D → E → C → F → G