Работа с SVG, плавные анимации
Есть две SVG. Как при нажатии на них сделать плавную анимацию перетекания одной в другую? Скажем есть кнопка которая переключает светлую тему на темную и на оборот, кнопка одна и та же, но внутри должна находится СВГ картинка солнышка и луны например. Так вот задача в том чтобы реализовать плавную анимацию перехода от одной в другую. То-есть что я имею ввиду, я пользователь захожу на страницу, мне светит яркий свет от сайта и я ищу где же поменять тему, вижу кнопку со знаком луны нажимаю на него, луна плавно превращается в солнышко и тема на сайте меняется. А после оказывается что мне темная тема не нравится и я решаю вернуться на светлую тему и тыкаю уже на измененную СВГ которая стала Солнышком, и солнышко перетекает плавно в Луну.
Солнышко —
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
<g fill="#fff" id="XMLID_497_">
<path id="XMLID_498_" d="M165,80c-46.867,0-84.996,38.131-84.996,85.001C80.004,211.87,118.133,250,165,250
c46.871,0,85.004-38.13,85.004-84.999C250.004,118.131,211.871,80,165,80z"/>
<path id="XMLID_500_" d="M165,50c8.284,0,15-6.716,15-15V15c0-8.284-6.716-15-15-15c-8.284,0-15,6.716-15,15v20
C150,43.284,156.716,50,165,50z"/>
<path id="XMLID_501_" d="M165,280c-8.284,0-15,6.716-15,15v20c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-20
C180,286.716,173.284,280,165,280z"/>
<path id="XMLID_502_" d="M315,150h-20c-8.284,0-15,6.716-15,15s6.716,15,15,15h20c8.284,0,15-6.716,15-15S323.284,150,315,150z"/>
<path id="XMLID_503_" d="M49.999,165c0-8.284-6.716-15-15-15H15c-8.284,0-15,6.716-15,15s6.716,15,15,15h19.999
C43.283,180,49.999,173.284,49.999,165z"/>
<path id="XMLID_504_" d="M256.924,88.076c3.839,0,7.678-1.465,10.607-4.394l14.142-14.143c5.858-5.858,5.857-15.356,0-21.213
c-5.858-5.857-15.356-5.857-21.213,0L246.317,62.47c-5.858,5.858-5.857,15.356,0.001,21.213
C249.247,86.612,253.085,88.076,256.924,88.076z"/>
<path id="XMLID_505_" d="M62.47,246.317l-14.143,14.142c-5.858,5.857-5.858,15.355,0,21.213c2.929,2.929,6.767,4.393,10.607,4.393
c3.838,0,7.678-1.464,10.606-4.393l14.143-14.142c5.858-5.857,5.858-15.355,0.001-21.213
C77.825,240.46,68.328,240.458,62.47,246.317z"/>
<path id="XMLID_506_" d="M267.53,246.317c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213l14.142,14.142
c2.929,2.929,6.768,4.393,10.606,4.393c3.839,0,7.678-1.464,10.607-4.393c5.858-5.858,5.858-15.355,0-21.213L267.53,246.317z"/>
<path id="XMLID_507_" d="M62.469,83.683c2.929,2.929,6.768,4.394,10.606,4.394s7.678-1.464,10.606-4.394
c5.858-5.858,5.858-15.355,0-21.213L69.54,48.328c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213
L62.469,83.683z"/>
</g>Луна —
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>moon</title>
<desc>Created with sketchtool.</desc>
<g id="weather" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="moon" fill="#fff">
<path d="M12.9692809,3.00081693 C10.5519709,4.3657756 8.91601003,6.98857416 8.91601003,10 C8.91601003,14.418278 12.4375663,18 16.7816261,18 C17.9282696,18 19.0176067,17.7504503 20,17.3018363 C18.3906054,19.5435802 15.7869372,21 12.8488181,21 C7.96175079,21 4,16.9705627 4,12 C4,7.02943725 7.96175079,3 12.8488181,3 C12.8890356,3 12.9291904,3.00027288 12.9692809,3.00081693 Z" id="Shape"></path>
</g>
</g>
</svg>