Лампочка состоит из polygon для внешнего треугольника и path для самой лампочки.
Стили вынесем отдельно.
<style>
a#light polygon, a#light path { transition-duration: 1s; }
#lightbulb-triangle { fill: #efe7bc; }
#lightbulb { fill: transparent; stroke: #fff; }
a#light:hover #lightbulb { stroke: #efe7bc; }
a#light:hover #lightbulb-triangle { fill: #000; }
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 425.5 113.5">
<a id="light" xlink:href="#" >
<polygon id="lightbulb-triangle" points="18.6,17.3 96.2,17.3 57.4,84.8 "/>
<path id="lightbulb" d="M58.1,43.6c0,0,7.2-4.4,4.5-6.7c0,0-1-0.7-2.2,1.8c0,0-1.2,3.8-2.6,3.8c-1.2,0-3.2,1.3-4.5-2.3 c0,0-0.2-3.6,2.5-2.6c0,0,3.1,5.9,2.3,14.2h-4.8c0,0-1.1-6.4-3.8-10.4c0,0-5.2-8.4,1.4-14.6c0,0,7.5-6.6,14.8,0.8 c0,0,4.5,4.2,1.4,11.6c0,0-2.5,5-2.8,5.9c0,0-1.7,8.2-1.2,8.2c0,0-4.2,0.1-8.5,1.2c0,0-2.5,0.9,0.3,1.2c0,0,7.1,0.2,7.7-0.7 c0,0-0.1-0.5-1.8-0.2c0,0-4.7,0.8-5.9,1.2c0,0-2.3,0.8,0,1.5c0,0,4.8,0.1,6.3-0.4c0,0,2.4-0.7-1-0.2c0,0-3.4,0.5-5.3,1.2 c0,0-2.8,0.6,0.9,1.5c0,0,4.6,0.2,5.9-0.3c0,0,2.1-2.2-3.7,1.4" />
</a>
</svg>
При наведении курсора срабатывает :hover и меняется цвет треугольника и лампы с анимацией в 1 секунду (transition-duration).
Часы тоже состоят из внешнего треугольника, а также добавлены два круга для циферблата и треугольник для минутной стрелки в виде path.
Затемнение треугольника работает также. Вдобавок добавлена анимация вращения минутной стрелки (может не работать в некоторых браузерах).
<style>
@keyframes timer {
to { transform: rotate(1turn); }
}
a#clock path { fill: #fff; }
a#clock:hover path#minute-hand {
transform-origin: center 110%;
animation: timer 2s forwards linear infinite;
}
path#hour-hand {
transform-origin: center 110%;
transform: scale(0.8);
}
#clock-triangle { fill: #bfe7dd; transition: 1s; }
a#clock:hover #clock-triangle { fill: #000; }
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 425.5 113.5">
<a id="clock" xlink:href="#" >
<polygon id="clock-triangle" points="212.4,88.4 191.2,52.5 170,16.5 212.4,16.5 254.8,16.5 233.6,52.5 "/>
<path id="clock-circle" d="M228.9,42.3c-0.4,9-7.2,15.8-16.2,16.2c-9,0.4-15.8-7.6-16.2-16.2c-0.3-9,7.7-15.8,16.2-16.1 C221.7,25.8,228.6,33.8,228.9,42.3c0,1,1.6,1,1.6,0c-0.4-9.9-7.9-17.4-17.8-17.7c-9.9-0.4-17.5,8.3-17.7,17.7
c-0.4,9.9,8.3,17.5,17.7,17.8c9.9,0.4,17.5-8.3,17.7-17.7C230.5,41.3,229,41.3,228.9,42.3"/>
<path id="noon" d="M213.3,27.8v-2.4c0-0.9-1.3-0.9-1.3,0v2.4C212,28.7,213.3,28.7,213.3,27.8"/>
<path id="three-oclock" d="M227.3,43.1h2.4c1,0,1-1.6,0-1.6h-2.4C226.3,41.5,226.3,43.1,227.3,43.1"/>
<path id="six-oclock" d="M211.9,56.8v2.4c0,1,1.6,1,1.6,0v-2.4C213.5,55.8,211.9,55.8,211.9,56.8"/>
<path id="nine-oclock" d="M198.2,41.5h-2.4c-1,0-1,1.6,0,1.6h2.4C199.3,43.1,199.3,41.5,198.2,41.5"/>
<path id="center-circle" d="M210.1,42.3c0-1.1,0.6-2,1.6-2.4c0.3-0.1,0.6-0.2,1-0.2c1.4,0,2.6,1.2,2.6,2.6c0,1.4-1.2,2.6-2.6,2.6 S210.1,43.7,210.1,42.3"/>
<path id="minute-hand" d="M213,30.5c0-0.3-0.5-0.3-0.5,0c-0.3,3.3-0.7,6.6-1,9.9c0,0.1,0.1,0.3,0.3,0.3l1.8-0.1 c0.1,0,0.3-0.1,0.3-0.3C213.5,37,213.2,33.8,213,30.5c0-0.3-0.6-0.3-0.5,0"/>
</a>
</svg>
Опять внешний треугольник и набор путей. При наведении указателям мыши детали сдвигаются и меняют размеры. Движения относительны оригинального размера элемента и корректно работает при изменении размеров страницы.
<style>
a#iris polygon { fill: #444341; transition: 1s; }
a#iris:hover polygon { fill: #000; }
a#iris path {
fill: #fff; transform: scale(0.8) 50 50; transition-duration: .8s;
}
a#iris:hover #leaf1 { transform: translateX(-3px); }
a#iris:hover #leaf2 { transform: translateX(-2px) translateY(-3px); }
a#iris:hover #leaf3 { transform: translateY(-3px) translateX(1px); }
a#iris:hover #leaf4 { transform: translateX(3px); }
a#iris:hover #leaf5 { transform: translateX(1px) translateY(3px); }
a#iris:hover #leaf6 { transform: translateX(-2px) translateY(3px); }
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="250 0 425.5 113.5">
<a id="iris" xlink:href="#" >
<polygon id="iris-triangle" points="326,18.3 404.3,18.3 365.2,85.8 "/>
<path id="leaf5" d="M364.8,26.4l-6.2,11.2l-3.8-6.2C357.5,27.8,362.2,26.7,364.8,26.4"/>
<path id="leaf4" d="M352.2,34.8l6.3,11.2l-7.3,0.1C349.6,41.7,351.1,37.2,352.2,34.8"/>
<path id="leaf3" d="M352.8,49.6l12.8,0.2l-3.7,6.4C357.5,55.3,354.4,51.8,352.8,49.6"/>
<path id="leaf2" d="M372.9,45.4l3.8,6.3c-2.9,3.6-7.5,4.6-10.2,4.8L372.9,45.4"/>
<path id="leaf1" d="M380,36.8c1.7,4.3,0.1,8.8-1,11.2l-6.3-11.2L380,36.8"/>
<path id="leaf6" d="M368.9,26.8c4.6,0.6,7.8,4.1,9.4,6.2l-12.8,0.3L368.9,26.8"/>
</a>
</svg>
Источник: the new code – Making SVG Animated Icons
Вернуться в раздел SVG