SVG-анимация бильярдных шаров

Познакомьтесь с очень реалистичной анимацией, выполненной с использованием исключительно векторной графики SVG. Шары, наталкиваясь на границу поля отражаются под тем же углом, под которым они двигались до столкновения. Для придания шарам объемности использована градиентная заливка. Создан эффект подсветки шаров. Правда, в примере не учитывается столкновение шаров друг с другом. Вы можете самостоятельно доработать этот пример. Пример отлично подходит как демонстрация возможностей svg-анимации. Его можно легко модифицировать: менять цвета шаров, добавлять новые шары. Может использоваться как учебный пример в курсе компьютерной графики. Для полноты, приведем код самого svg-файла:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="50%" cy="20%" r="3%" fill="url(#grad_blue)" > <animate attributeName="cx" dur="3" values="3%;97%;3%" repeatCount="indefinite" /> <animate attributeName="cy" dur="2.8" values="3%;97%;3%" repeatCount="indefinite" /> </circle> <circle cx="30%" cy="70%" r="3%" fill="url(#grad_red)" > <animate attributeName="cx" dur="2.7" values="97%;3%;97%" repeatCount="indefinite" /> <animate attributeName="cy" dur="3.1" values="3%;97%;3%" repeatCount="indefinite" /> </circle> <radialGradient id="grad_blue" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> <stop stop-color="white" offset="0"/> <stop stop-color="blue" offset="25%"/> <stop stop-color="rgb(0,0,192)" offset="50%"/> <stop stop-color="rgb(0,0,127)" offset="70%"/> <stop stop-color="rgb(0,0,64)" offset="85%"/> <stop stop-color="rgb(0,0,0)" offset="100%"/> </radialGradient> <radialGradient id="grad_red" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> <stop stop-color="white" offset="0"/> <stop stop-color="red" offset="25%"/> <stop stop-color="rgb(192,0,0)" offset="50%"/> <stop stop-color="rgb(127,0,0)" offset="70%"/> <stop stop-color="rgb(64,0,0)" offset="85%"/> <stop stop-color="rgb(0,0,0)" offset="100%"/> </radialGradient> </svg>