Шар с движущейся тенью - 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 width="100%" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <radialGradient id="gradientRed" cx="50%" cy="50%" r="100%" fx="20%" fy="10%"> <animate attributeName="fy" dur="6s" values="10%;90%;10%" repeatCount="indefinite" /> <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> <filter id="shadow" filterUnits="userSpaceOnUse" width="100%" height="100%"> <feGaussianBlur in="SourceAlpha" result="inShadow" stdDeviation="10" /> <feOffset in="inShadow" result="myShadow" dx="45" dy="35"> <animate attributeName="dy" dur="6s" values="35;-35;35" repeatCount="indefinite" /> </feOffset> <feBlend in="SourceGraphic" in2="myShadow" mode="normal"/> </filter> <circle id="myCircle" cx="50%" cy="50%" r="20%" fill="url(#gradientRed)" filter="url(#shadow)" > </circle> </svg>