Реалистичные объемные шары с подсветкой - 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="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <circle id="myCircle" cx="250" cy="200" r="100" /> </defs> <defs> <radialGradient id="gradient_3D" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> <stop stop-color="white" offset="0"/> <stop stop-color="#666" offset="50%"/> <stop stop-color="black" offset="100%"/> </radialGradient> <radialGradient id="gradient_3D_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> </defs> <use xlink:href="#myCircle" fill="url(#gradient_3D)" /> <use xlink:href="#myCircle" fill="url(#gradient_3D_red)" transform="translate(300,0)"/> </svg>