SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// TCP HANDSHAKE VIEW (Preserved)
// ============================================================================
export const TCPHandshakeView = () => {
const [step, setStep] = useState(0); // 0: Idle, 1: SYN, 2: SYN-ACK, 3: ACK, 4: Connected
useEffect(() => {
const timer
TCP three-way handshake
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// BUBBLE SORT VIEW (Preserved)
// ============================================================================
export const BubbleSortView = () => {
const [arr, setArr] = useState([40, 100, 20, 80, 60, 120, 10, 90]);
const [comparing, setComparing] = useState<number[]>([]);
c