SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 400;
const WAVE_SPEED = 2; // 波纹扩散速度
const EMISSION_RATE = 15; // 发射频率 (每多少帧发射一次)
const MAX_SOURCE_SPEED = 1.2; // 源点移动最大速度 (需小于 WAVE_SPEED 以避免音爆/混乱)
export const DopplerEffectView = () => {
const [waves, setWaves] = useState([]);
const [sourceX, setSourceX] = useState(200);
const [velocity, setVelocity] = useState(0);
const [phase, setPhase] = useState('static'); // s
Doppler effect of a moving wave source
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BALL_RADIUS = 30;
const STRING_LENGTH = 250;
const PIVOT_Y = 100;
const CENTER_X = VIEW_WIDTH / 2;
const MAX_ANGLE = Math.PI / 4; // 45 degrees swing
export const NewtonsCradle = () => {
const [time, setTime] = useState(Math.PI); // Start with left ball ready to swing down
const requestRef = useRef<number>();
// Physics loop
const animate = () => {
//