SVG clipping mask not working as expected - html

Issue
So I posted this question this morning; and ended up deciding that using an SVG and filling it would be the best option. I have never in my life attempted to fill an SVG using CSS, any guidance will be appreciated.
So at the moment I have the fill effect going over the SVG. Now I assume I need some form of clipping so the fill SVG stays within the borders of the SVG I am filling. Now I tried applying the clip path but it doesn't seem to be working.
Code
The SVG is defined as follows:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.144 513.144" style="enable-background:new 0 0 513.144 513.144;" xml:space="preserve" width="512" height="512">
<g>
<path d="M500.644,369.495c-3.093-1.42-76.317-34.787-126.364-34.787c-4.688,0-9.531,0.292-14.463,0.823 c13.329-8.636,24.433-17.37,33.209-26.146c18.14-18.14,36.918-47.025,55.811-85.853c13.962-28.692,22.563-51.799,22.922-52.769 c1.018-2.748,0.342-5.837-1.729-7.909c-2.073-2.073-5.162-2.747-7.909-1.729c-0.97,0.359-24.077,8.96-52.77,22.921 c-38.828,18.893-67.713,37.67-85.854,55.811c-5.668,5.668-11.319,12.305-16.937,19.886c6.158-24.56,9.288-46.367,9.288-65.142 c0-22.32-4.491-50.011-13.35-82.306c-1.095-3.994-5.224-6.345-9.216-5.249c-3.995,1.096-6.345,5.222-5.249,9.217 c8.503,31.002,12.814,57.358,12.814,78.338c0,41.177-16.639,92.535-30.909,129.011c-5.493,11.841-9.995,22.644-13.366,31.183 c-3.371-8.537-7.872-19.338-13.364-31.177c-14.271-36.476-30.911-87.838-30.911-129.017c0-55.677,30.372-134.866,44.283-168.214 c5.44,13.016,13.389,33.002,21.021,55.778c1.316,3.927,5.567,6.042,9.494,4.728c3.928-1.316,6.045-5.567,4.729-9.495 c-13.62-40.642-28.289-72.709-28.436-73.028C262.165,1.707,259.503,0,256.572,0s-5.593,1.707-6.815,4.37 c-0.131,0.285-13.247,28.95-26.161,66.345c-17.451,50.528-26.299,92.209-26.299,123.887c0,20.521,3.752,43.063,9.248,65.088 c-5.605-7.558-11.242-14.177-16.897-19.832c-18.141-18.14-47.025-36.917-85.854-55.811c-28.692-13.961-51.8-22.562-52.77-22.921 c-2.747-1.018-5.836-0.343-7.909,1.729c-2.071,2.072-2.747,5.161-1.729,7.909c0.56,1.512,13.96,37.474,34.46,75.25 c1.975,3.64,6.526,4.99,10.169,3.015c3.641-1.976,4.99-6.528,3.015-10.169c-11.783-21.714-21.306-43.201-27.16-57.243 c28.297,11.815,86.886,38.563,117.17,68.847c20.043,20.043,37.397,51.371,49.865,78.049c5.261,13.454,10.223,24.931,14.006,33.319 c-8.893-3.827-20.63-8.553-33.701-12.985c-26.772-12.483-58.331-29.914-78.484-50.067c-7.079-7.079-14.461-16.23-21.941-27.2 c-2.335-3.423-6.999-4.306-10.422-1.971c-3.422,2.333-4.305,7-1.971,10.421c8.005,11.741,15.988,21.617,23.727,29.356 c8.776,8.776,19.88,17.51,33.209,26.146c-4.932-0.531-9.775-0.823-14.463-0.823c-50.047,0-123.271,33.366-126.364,34.787 c-2.663,1.223-4.37,3.885-4.37,6.815s1.707,5.592,4.37,6.815c3.093,1.42,76.317,34.786,126.364,34.786 c10.366,0,21.493-1.431,32.65-3.711c-0.588,0.558-1.17,1.118-1.735,1.684c-27.14,27.141-48.671,84.715-49.574,87.152 c-1.018,2.748-0.342,5.837,1.729,7.909c1.433,1.432,3.35,2.197,5.305,2.197c0.874,0,1.756-0.153,2.604-0.467 c2.438-0.903,60.013-22.434,87.152-49.574c17.615-17.615,31.65-46.792,39.576-65.827c7.926,19.035,21.96,48.212,39.574,65.827 c27.141,27.141,84.715,48.671,87.153,49.574c0.849,0.314,1.729,0.467,2.604,0.467c1.954,0,3.872-0.765,5.305-2.197 c2.071-2.072,2.747-5.161,1.729-7.909c-0.902-2.438-22.434-60.012-49.573-87.152c-0.565-0.565-1.147-1.126-1.736-1.684 c11.157,2.28,22.285,3.711,32.651,3.711c50.047,0,123.271-33.366,126.364-34.786c2.663-1.223,4.37-3.885,4.37-6.815 S503.307,370.718,500.644,369.495z M334.104,250.463c30.281-30.282,88.858-57.025,117.157-68.842 c-11.816,28.299-38.56,86.876-68.843,117.158c-20.153,20.153-51.712,37.585-78.484,50.067 c-13.084,4.437-24.833,9.168-33.729,12.997c3.674-8.175,8.482-19.328,13.62-32.442 C296.323,302.533,313.836,270.731,334.104,250.463z M138.864,402.912c-33.346,0-79.849-16.828-104.044-26.602 c24.195-9.774,70.698-26.602,104.044-26.602c20.161,0,44.137,6.168,64.923,13.196c12.005,5.571,22.949,10.126,31.551,13.518 c-6.154,2.568-13.344,5.766-20.853,9.512C191.612,394.369,162.594,402.912,138.864,402.912z M206.391,452.496 C206.39,452.496,206.39,452.496,206.391,452.496c-16.419,16.419-46.659,31.208-65.404,39.397 c8.183-18.739,22.963-48.964,39.4-65.401c10.28-10.28,25.504-19.427,39.822-26.618c8.688-3.214,16.471-6.401,22.803-9.127 C235.599,408.639,222.379,436.508,206.391,452.496z M332.757,426.492c16.419,16.419,31.209,46.659,39.397,65.404 c-18.738-8.182-48.964-22.963-65.4-39.4c-15.964-15.964-29.193-43.845-36.614-61.746c6.346,2.733,14.15,5.927,22.862,9.148 C307.293,407.081,322.48,416.215,332.757,426.492z M374.279,402.912c-23.729,0-52.747-8.543-75.62-16.978 c-7.509-3.746-14.699-6.944-20.853-9.512c8.602-3.391,19.546-7.946,31.55-13.518c20.785-7.028,44.762-13.196,64.923-13.196 c33.349,0,79.854,16.83,104.048,26.604C454.141,386.086,407.655,402.912,374.279,402.912z"/>
</g>
</svg>
And the CSS and HTML are as follows:
#banner {
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
posiiton: relative;
&::before {
font-size: 100px;
color: rgba(green, 0.5);
}
}
#banner .fill {
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: -1;
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
top: 100%;
}
100% {
top: 0;
}
}
#keyframes waveAction {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}
<div id="banner">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.144 513.144" style="enable-background:new 0 0 513.144 513.144;" xml:space="preserve" width="512" height="512">
<g>
<path d="M500.644,369.495c-3.093-1.42-76.317-34.787-126.364-34.787c-4.688,0-9.531,0.292-14.463,0.823 c13.329-8.636,24.433-17.37,33.209-26.146c18.14-18.14,36.918-47.025,55.811-85.853c13.962-28.692,22.563-51.799,22.922-52.769 c1.018-2.748,0.342-5.837-1.729-7.909c-2.073-2.073-5.162-2.747-7.909-1.729c-0.97,0.359-24.077,8.96-52.77,22.921 c-38.828,18.893-67.713,37.67-85.854,55.811c-5.668,5.668-11.319,12.305-16.937,19.886c6.158-24.56,9.288-46.367,9.288-65.142 c0-22.32-4.491-50.011-13.35-82.306c-1.095-3.994-5.224-6.345-9.216-5.249c-3.995,1.096-6.345,5.222-5.249,9.217 c8.503,31.002,12.814,57.358,12.814,78.338c0,41.177-16.639,92.535-30.909,129.011c-5.493,11.841-9.995,22.644-13.366,31.183 c-3.371-8.537-7.872-19.338-13.364-31.177c-14.271-36.476-30.911-87.838-30.911-129.017c0-55.677,30.372-134.866,44.283-168.214 c5.44,13.016,13.389,33.002,21.021,55.778c1.316,3.927,5.567,6.042,9.494,4.728c3.928-1.316,6.045-5.567,4.729-9.495 c-13.62-40.642-28.289-72.709-28.436-73.028C262.165,1.707,259.503,0,256.572,0s-5.593,1.707-6.815,4.37 c-0.131,0.285-13.247,28.95-26.161,66.345c-17.451,50.528-26.299,92.209-26.299,123.887c0,20.521,3.752,43.063,9.248,65.088 c-5.605-7.558-11.242-14.177-16.897-19.832c-18.141-18.14-47.025-36.917-85.854-55.811c-28.692-13.961-51.8-22.562-52.77-22.921 c-2.747-1.018-5.836-0.343-7.909,1.729c-2.071,2.072-2.747,5.161-1.729,7.909c0.56,1.512,13.96,37.474,34.46,75.25 c1.975,3.64,6.526,4.99,10.169,3.015c3.641-1.976,4.99-6.528,3.015-10.169c-11.783-21.714-21.306-43.201-27.16-57.243 c28.297,11.815,86.886,38.563,117.17,68.847c20.043,20.043,37.397,51.371,49.865,78.049c5.261,13.454,10.223,24.931,14.006,33.319 c-8.893-3.827-20.63-8.553-33.701-12.985c-26.772-12.483-58.331-29.914-78.484-50.067c-7.079-7.079-14.461-16.23-21.941-27.2 c-2.335-3.423-6.999-4.306-10.422-1.971c-3.422,2.333-4.305,7-1.971,10.421c8.005,11.741,15.988,21.617,23.727,29.356 c8.776,8.776,19.88,17.51,33.209,26.146c-4.932-0.531-9.775-0.823-14.463-0.823c-50.047,0-123.271,33.366-126.364,34.787 c-2.663,1.223-4.37,3.885-4.37,6.815s1.707,5.592,4.37,6.815c3.093,1.42,76.317,34.786,126.364,34.786 c10.366,0,21.493-1.431,32.65-3.711c-0.588,0.558-1.17,1.118-1.735,1.684c-27.14,27.141-48.671,84.715-49.574,87.152 c-1.018,2.748-0.342,5.837,1.729,7.909c1.433,1.432,3.35,2.197,5.305,2.197c0.874,0,1.756-0.153,2.604-0.467 c2.438-0.903,60.013-22.434,87.152-49.574c17.615-17.615,31.65-46.792,39.576-65.827c7.926,19.035,21.96,48.212,39.574,65.827 c27.141,27.141,84.715,48.671,87.153,49.574c0.849,0.314,1.729,0.467,2.604,0.467c1.954,0,3.872-0.765,5.305-2.197 c2.071-2.072,2.747-5.161,1.729-7.909c-0.902-2.438-22.434-60.012-49.573-87.152c-0.565-0.565-1.147-1.126-1.736-1.684 c11.157,2.28,22.285,3.711,32.651,3.711c50.047,0,123.271-33.366,126.364-34.786c2.663-1.223,4.37-3.885,4.37-6.815 S503.307,370.718,500.644,369.495z M334.104,250.463c30.281-30.282,88.858-57.025,117.157-68.842 c-11.816,28.299-38.56,86.876-68.843,117.158c-20.153,20.153-51.712,37.585-78.484,50.067 c-13.084,4.437-24.833,9.168-33.729,12.997c3.674-8.175,8.482-19.328,13.62-32.442 C296.323,302.533,313.836,270.731,334.104,250.463z M138.864,402.912c-33.346,0-79.849-16.828-104.044-26.602 c24.195-9.774,70.698-26.602,104.044-26.602c20.161,0,44.137,6.168,64.923,13.196c12.005,5.571,22.949,10.126,31.551,13.518 c-6.154,2.568-13.344,5.766-20.853,9.512C191.612,394.369,162.594,402.912,138.864,402.912z M206.391,452.496 C206.39,452.496,206.39,452.496,206.391,452.496c-16.419,16.419-46.659,31.208-65.404,39.397 c8.183-18.739,22.963-48.964,39.4-65.401c10.28-10.28,25.504-19.427,39.822-26.618c8.688-3.214,16.471-6.401,22.803-9.127 C235.599,408.639,222.379,436.508,206.391,452.496z M332.757,426.492c16.419,16.419,31.209,46.659,39.397,65.404 c-18.738-8.182-48.964-22.963-65.4-39.4c-15.964-15.964-29.193-43.845-36.614-61.746c6.346,2.733,14.15,5.927,22.862,9.148 C307.293,407.081,322.48,416.215,332.757,426.492z M374.279,402.912c-23.729,0-52.747-8.543-75.62-16.978 c-7.509-3.746-14.699-6.944-20.853-9.512c8.602-3.391,19.546-7.946,31.55-13.518c20.785-7.028,44.762-13.196,64.923-13.196 c33.349,0,79.854,16.83,104.048,26.604C454.141,386.086,407.655,402.912,374.279,402.912z"/>
</g>
</svg>
<div class="fill">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<clipPath id="clipPath">
<path d="M500.644,369.495c-3.093-1.42-76.317-34.787-126.364-34.787c-4.688,0-9.531,0.292-14.463,0.823 c13.329-8.636,24.433-17.37,33.209-26.146c18.14-18.14,36.918-47.025,55.811-85.853c13.962-28.692,22.563-51.799,22.922-52.769 c1.018-2.748,0.342-5.837-1.729-7.909c-2.073-2.073-5.162-2.747-7.909-1.729c-0.97,0.359-24.077,8.96-52.77,22.921 c-38.828,18.893-67.713,37.67-85.854,55.811c-5.668,5.668-11.319,12.305-16.937,19.886c6.158-24.56,9.288-46.367,9.288-65.142 c0-22.32-4.491-50.011-13.35-82.306c-1.095-3.994-5.224-6.345-9.216-5.249c-3.995,1.096-6.345,5.222-5.249,9.217 c8.503,31.002,12.814,57.358,12.814,78.338c0,41.177-16.639,92.535-30.909,129.011c-5.493,11.841-9.995,22.644-13.366,31.183 c-3.371-8.537-7.872-19.338-13.364-31.177c-14.271-36.476-30.911-87.838-30.911-129.017c0-55.677,30.372-134.866,44.283-168.214 c5.44,13.016,13.389,33.002,21.021,55.778c1.316,3.927,5.567,6.042,9.494,4.728c3.928-1.316,6.045-5.567,4.729-9.495 c-13.62-40.642-28.289-72.709-28.436-73.028C262.165,1.707,259.503,0,256.572,0s-5.593,1.707-6.815,4.37 c-0.131,0.285-13.247,28.95-26.161,66.345c-17.451,50.528-26.299,92.209-26.299,123.887c0,20.521,3.752,43.063,9.248,65.088 c-5.605-7.558-11.242-14.177-16.897-19.832c-18.141-18.14-47.025-36.917-85.854-55.811c-28.692-13.961-51.8-22.562-52.77-22.921 c-2.747-1.018-5.836-0.343-7.909,1.729c-2.071,2.072-2.747,5.161-1.729,7.909c0.56,1.512,13.96,37.474,34.46,75.25 c1.975,3.64,6.526,4.99,10.169,3.015c3.641-1.976,4.99-6.528,3.015-10.169c-11.783-21.714-21.306-43.201-27.16-57.243 c28.297,11.815,86.886,38.563,117.17,68.847c20.043,20.043,37.397,51.371,49.865,78.049c5.261,13.454,10.223,24.931,14.006,33.319 c-8.893-3.827-20.63-8.553-33.701-12.985c-26.772-12.483-58.331-29.914-78.484-50.067c-7.079-7.079-14.461-16.23-21.941-27.2 c-2.335-3.423-6.999-4.306-10.422-1.971c-3.422,2.333-4.305,7-1.971,10.421c8.005,11.741,15.988,21.617,23.727,29.356 c8.776,8.776,19.88,17.51,33.209,26.146c-4.932-0.531-9.775-0.823-14.463-0.823c-50.047,0-123.271,33.366-126.364,34.787 c-2.663,1.223-4.37,3.885-4.37,6.815s1.707,5.592,4.37,6.815c3.093,1.42,76.317,34.786,126.364,34.786 c10.366,0,21.493-1.431,32.65-3.711c-0.588,0.558-1.17,1.118-1.735,1.684c-27.14,27.141-48.671,84.715-49.574,87.152 c-1.018,2.748-0.342,5.837,1.729,7.909c1.433,1.432,3.35,2.197,5.305,2.197c0.874,0,1.756-0.153,2.604-0.467 c2.438-0.903,60.013-22.434,87.152-49.574c17.615-17.615,31.65-46.792,39.576-65.827c7.926,19.035,21.96,48.212,39.574,65.827 c27.141,27.141,84.715,48.671,87.153,49.574c0.849,0.314,1.729,0.467,2.604,0.467c1.954,0,3.872-0.765,5.305-2.197 c2.071-2.072,2.747-5.161,1.729-7.909c-0.902-2.438-22.434-60.012-49.573-87.152c-0.565-0.565-1.147-1.126-1.736-1.684 c11.157,2.28,22.285,3.711,32.651,3.711c50.047,0,123.271-33.366,126.364-34.786c2.663-1.223,4.37-3.885,4.37-6.815 S503.307,370.718,500.644,369.495z M334.104,250.463c30.281-30.282,88.858-57.025,117.157-68.842 c-11.816,28.299-38.56,86.876-68.843,117.158c-20.153,20.153-51.712,37.585-78.484,50.067 c-13.084,4.437-24.833,9.168-33.729,12.997c3.674-8.175,8.482-19.328,13.62-32.442 C296.323,302.533,313.836,270.731,334.104,250.463z M138.864,402.912c-33.346,0-79.849-16.828-104.044-26.602 c24.195-9.774,70.698-26.602,104.044-26.602c20.161,0,44.137,6.168,64.923,13.196c12.005,5.571,22.949,10.126,31.551,13.518 c-6.154,2.568-13.344,5.766-20.853,9.512C191.612,394.369,162.594,402.912,138.864,402.912z M206.391,452.496 C206.39,452.496,206.39,452.496,206.391,452.496c-16.419,16.419-46.659,31.208-65.404,39.397 c8.183-18.739,22.963-48.964,39.4-65.401c10.28-10.28,25.504-19.427,39.822-26.618c8.688-3.214,16.471-6.401,22.803-9.127 C235.599,408.639,222.379,436.508,206.391,452.496z M332.757,426.492c16.419,16.419,31.209,46.659,39.397,65.404 c-18.738-8.182-48.964-22.963-65.4-39.4c-15.964-15.964-29.193-43.845-36.614-61.746c6.346,2.733,14.15,5.927,22.862,9.148 C307.293,407.081,322.48,416.215,332.757,426.492z M374.279,402.912c-23.729,0-52.747-8.543-75.62-16.978 c-7.509-3.746-14.699-6.944-20.853-9.512c8.602-3.391,19.546-7.946,31.55-13.518c20.785-7.028,44.762-13.196,64.923-13.196 c33.349,0,79.854,16.83,104.048,26.604C454.141,386.086,407.655,402.912,374.279,402.912z"/>
</clipPath>
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>


Your example can be simplified a lot. Below is a working example, using just an SVG without any overlapping HTML elements.
Two points to note here:
The waveShape and the icon are designed for different sizes. The waveShape is 300x300, but the icon is 512x512. So I had to scale the icon down by (300/512) or 0.586 to make the sizes match. That is the reason for the transform="scale(0.586, 0.586)" on the icon path.
I suspect you wanted to fill the centre of the icon, not just its edges. Unfortunately, the icon you have chosen is designed so that its fill is the edges only. To fix that, you will need to replace the icon path here with the one from the solid ("fas") version of the icon.
#banner .fill {
width: 400px;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
fill: #04ACFF;
}
#keyframes waveAction {
0% {
transform: translate(0, 300px);
}
100% {
transform: translate(0, 0);
}
}
<div id="banner">
<div class="fill">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<clipPath id="clipPath">
<path transform="scale(0.586,0.586)"
d="M500.644,369.495c-3.093-1.42-76.317-34.787-126.364-34.787c-4.688,0-9.531,0.292-14.463,0.823 c13.329-8.636,24.433-17.37,33.209-26.146c18.14-18.14,36.918-47.025,55.811-85.853c13.962-28.692,22.563-51.799,22.922-52.769 c1.018-2.748,0.342-5.837-1.729-7.909c-2.073-2.073-5.162-2.747-7.909-1.729c-0.97,0.359-24.077,8.96-52.77,22.921 c-38.828,18.893-67.713,37.67-85.854,55.811c-5.668,5.668-11.319,12.305-16.937,19.886c6.158-24.56,9.288-46.367,9.288-65.142 c0-22.32-4.491-50.011-13.35-82.306c-1.095-3.994-5.224-6.345-9.216-5.249c-3.995,1.096-6.345,5.222-5.249,9.217 c8.503,31.002,12.814,57.358,12.814,78.338c0,41.177-16.639,92.535-30.909,129.011c-5.493,11.841-9.995,22.644-13.366,31.183 c-3.371-8.537-7.872-19.338-13.364-31.177c-14.271-36.476-30.911-87.838-30.911-129.017c0-55.677,30.372-134.866,44.283-168.214 c5.44,13.016,13.389,33.002,21.021,55.778c1.316,3.927,5.567,6.042,9.494,4.728c3.928-1.316,6.045-5.567,4.729-9.495 c-13.62-40.642-28.289-72.709-28.436-73.028C262.165,1.707,259.503,0,256.572,0s-5.593,1.707-6.815,4.37 c-0.131,0.285-13.247,28.95-26.161,66.345c-17.451,50.528-26.299,92.209-26.299,123.887c0,20.521,3.752,43.063,9.248,65.088 c-5.605-7.558-11.242-14.177-16.897-19.832c-18.141-18.14-47.025-36.917-85.854-55.811c-28.692-13.961-51.8-22.562-52.77-22.921 c-2.747-1.018-5.836-0.343-7.909,1.729c-2.071,2.072-2.747,5.161-1.729,7.909c0.56,1.512,13.96,37.474,34.46,75.25 c1.975,3.64,6.526,4.99,10.169,3.015c3.641-1.976,4.99-6.528,3.015-10.169c-11.783-21.714-21.306-43.201-27.16-57.243 c28.297,11.815,86.886,38.563,117.17,68.847c20.043,20.043,37.397,51.371,49.865,78.049c5.261,13.454,10.223,24.931,14.006,33.319 c-8.893-3.827-20.63-8.553-33.701-12.985c-26.772-12.483-58.331-29.914-78.484-50.067c-7.079-7.079-14.461-16.23-21.941-27.2 c-2.335-3.423-6.999-4.306-10.422-1.971c-3.422,2.333-4.305,7-1.971,10.421c8.005,11.741,15.988,21.617,23.727,29.356 c8.776,8.776,19.88,17.51,33.209,26.146c-4.932-0.531-9.775-0.823-14.463-0.823c-50.047,0-123.271,33.366-126.364,34.787 c-2.663,1.223-4.37,3.885-4.37,6.815s1.707,5.592,4.37,6.815c3.093,1.42,76.317,34.786,126.364,34.786 c10.366,0,21.493-1.431,32.65-3.711c-0.588,0.558-1.17,1.118-1.735,1.684c-27.14,27.141-48.671,84.715-49.574,87.152 c-1.018,2.748-0.342,5.837,1.729,7.909c1.433,1.432,3.35,2.197,5.305,2.197c0.874,0,1.756-0.153,2.604-0.467 c2.438-0.903,60.013-22.434,87.152-49.574c17.615-17.615,31.65-46.792,39.576-65.827c7.926,19.035,21.96,48.212,39.574,65.827 c27.141,27.141,84.715,48.671,87.153,49.574c0.849,0.314,1.729,0.467,2.604,0.467c1.954,0,3.872-0.765,5.305-2.197 c2.071-2.072,2.747-5.161,1.729-7.909c-0.902-2.438-22.434-60.012-49.573-87.152c-0.565-0.565-1.147-1.126-1.736-1.684 c11.157,2.28,22.285,3.711,32.651,3.711c50.047,0,123.271-33.366,126.364-34.786c2.663-1.223,4.37-3.885,4.37-6.815 S503.307,370.718,500.644,369.495z M334.104,250.463c30.281-30.282,88.858-57.025,117.157-68.842 c-11.816,28.299-38.56,86.876-68.843,117.158c-20.153,20.153-51.712,37.585-78.484,50.067 c-13.084,4.437-24.833,9.168-33.729,12.997c3.674-8.175,8.482-19.328,13.62-32.442 C296.323,302.533,313.836,270.731,334.104,250.463z M138.864,402.912c-33.346,0-79.849-16.828-104.044-26.602 c24.195-9.774,70.698-26.602,104.044-26.602c20.161,0,44.137,6.168,64.923,13.196c12.005,5.571,22.949,10.126,31.551,13.518 c-6.154,2.568-13.344,5.766-20.853,9.512C191.612,394.369,162.594,402.912,138.864,402.912z M206.391,452.496 C206.39,452.496,206.39,452.496,206.391,452.496c-16.419,16.419-46.659,31.208-65.404,39.397 c8.183-18.739,22.963-48.964,39.4-65.401c10.28-10.28,25.504-19.427,39.822-26.618c8.688-3.214,16.471-6.401,22.803-9.127 C235.599,408.639,222.379,436.508,206.391,452.496z M332.757,426.492c16.419,16.419,31.209,46.659,39.397,65.404 c-18.738-8.182-48.964-22.963-65.4-39.4c-15.964-15.964-29.193-43.845-36.614-61.746c6.346,2.733,14.15,5.927,22.862,9.148 C307.293,407.081,322.48,416.215,332.757,426.492z M374.279,402.912c-23.729,0-52.747-8.543-75.62-16.978 c-7.509-3.746-14.699-6.944-20.853-9.512c8.602-3.391,19.546-7.946,31.55-13.518c20.785-7.028,44.762-13.196,64.923-13.196 c33.349,0,79.854,16.83,104.048,26.604C454.141,386.086,407.655,402.912,374.279,402.912z"/>
</clipPath>
<g clip-path="url(#clipPath)">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</g>
</svg>
</div>
</div>

Related

How to prevent an outline on SVG path when animating clip path?

I'm trying to get this animation to work in my website. For some reason the layered paths show through so a thin white outline for the path (that's animated in) is visible ruining the animation, despite the fact the paths are identical in size. I wondered if anyone has any suggestions on how to prevent this?
I've made a jsFiddle and added the code below. If you change the background for the body to black it's even clearer.
Any help would be appreciate.
body {
background: #333;
padding: 2em;
}
svg {
display: block;
left: 50%;
max-width: 8em;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#rect {
animation: slideOver 5s linear infinite;
}
#keyframes slideOver {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}v
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
<defs>
<clipPath id="clip-path">
<rect id="rect" x="0" y="0" height="346" width="250"/>
</clipPath>
</defs>
<path fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
<path clip-path="url(#clip-path)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
</svg>

SVG image wave animation

I'm working on animations here I have an SVG image I'm trying to move image like a wave continuously. I have tried using gsap and css still not getting. Can anyone suggest me any help will be appreciated
GSAP
TweenMax.to("#turbwave", 8, {
attr:{"baseFrequency":0.01},
repeat:-1,
yoyo:true
});
#keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}
.container {
width: 100px;
overflow: hidden;
}
.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<svg id="wave" xmlns="http://www.w3.org/2000/svg" width="1920" height="780" viewBox="0 0 1920 780">
<g>
<g opacity=".75">
<path fill="#ffefdd" d="M518.416 278.813c100.975 408.098 513.434 328.466 588.907 253.974 75.473-74.493 153.228-259.973 324.949-282.534 154.635-20.315 317.211-182.93 487.728-78.482v453.068c-264.98 2.452-323.019-161.187-601.137 25.146-320.667 214.84-339.51 105.56-508.484 75.563S535.477 828.256 326.51 643.775C188.975 522.356 98.538 508.728 0 535.407V0h260.293c113.729 39.308 218.825 119.99 258.123 278.813z"/>
</g>
</g>
</svg>

The reason why you cannot currently animate your SVG like the one in the answer you linked is because they fake the wave by just translating the wave and having each side match up. If you remove the set width in the example on that answer you can clearly see this:
#keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}
.container {
width: 100px;
overflow: hidden;
}
.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<div class="container">
<svg id="wave" 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 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
.st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
<path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
</div>
In order to animate your SVG like a wave it will be more complex because the ends don't match up to each other. You likely need to use an SVG animation tool like GSAP's MorphSVG (which is a paid plugin, but you can try it out free on CodePen).
With MorphSVG I'd recommend making 2 or 3 different SVG and then animating between them using MorphSVG. There are several examples of how to do this on the GreenSock website.
For more about MorphSVG see the GreenSock page for it.

For Wave SVG you may use this:
<svg id="wave" viewbox="0 0 100 15">
<path fill="#fff" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" />
<path fill="#fff" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>

SVG line animation first erasing and then drawing

I want my animation to work as https://codepen.io/shshaw/pen/Hjyio like drawing the image from scratch. But what my animation is doing that first it's erasing the picture and then drawing again.
path {
fill: #FFF;
stroke: #000;
animation: my_animation 3s linear forwards;
stroke-dasharray: 400;
}
#keyframes my_animation {
0% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: 400;
}
100% {
stroke-dashoffset: 0;
}
}
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 89.999 89.999" style="enable-background:new 0 0 89.999 89.999;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M89.551,24.201c-5.029,28.863-33.127,53.301-41.577,58.883c-8.454,5.582-16.163-2.236-18.96-8.148 c-3.201-6.738-12.793-43.285-15.307-46.311C11.195,25.596,3.656,31.65,3.656,31.65L0,26.768c0,0,15.307-18.623,26.957-20.951 c12.35-2.469,12.332,19.318,15.301,31.416c2.873,11.701,4.807,18.398,7.312,18.398c2.514,0,7.311-6.525,12.562-16.531 c5.264-10.016-0.225-18.857-10.505-12.568C55.738,1.395,94.578-4.65,89.551,24.201z" fill="#ff0043"/>
</g>
</svg>
Any help or suggestion so it starts to draw only instead of first erasing it also how to fill it with colour at last ?

Set the starting keyframe to start with stroke-dashoffset: 400 or simply add it to the path rules, and use a separate animation for filling:
path {
fill: #fff;
stroke: #000;
animation: my_animation 3s linear forwards, filling .5s linear 3s forwards;
stroke-dasharray: 400; /* need to ... */
stroke-dashoffset: 400; /* ... match */
}
#keyframes my_animation {
to {stroke-dashoffset: 0}
}
#keyframes filling {
to {fill: #000}
}
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 89.999 89.999" style="enable-background:new 0 0 89.999 89.999;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M89.551,24.201c-5.029,28.863-33.127,53.301-41.577,58.883c-8.454,5.582-16.163-2.236-18.96-8.148 c-3.201-6.738-12.793-43.285-15.307-46.311C11.195,25.596,3.656,31.65,3.656,31.65L0,26.768c0,0,15.307-18.623,26.957-20.951 c12.35-2.469,12.332,19.318,15.301,31.416c2.873,11.701,4.807,18.398,7.312,18.398c2.514,0,7.311-6.525,12.562-16.531 c5.264-10.016-0.225-18.857-10.505-12.568C55.738,1.395,94.578-4.65,89.551,24.201z" fill="#ff0043"/>
</g>
</svg>

SVG Fill Animation doesn't work on Firefox and Edge

I have a simple animation where an SVG fills on mouse over. It is working fine on Chrome, but I've found that it's doesn't workg on Firefox or Edge. I've tried few different approaches, but nothing seems to help. I'm new to SVG and I guess I'm missing something? What is the proper way to achieve what I'm trying to do? Here is the code:
svg#bogeLogo {
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
svg#bogeLogo #bogePath {
fill: transparent;
stroke: red;
stroke-width: 8;
}
svg#bogeLogo #bogeFinal {
fill: blue;
}
svg#bogeLogo #bogeClip rect {
transition: all 1.4s ease-out !important;
width: 0;
}
svg#bogeLogo:hover #bogeClip rect {
width: 100%;
}
<svg id="bogeLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2551.2 2551.2" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<defs>
<path id="bogePath" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"/>
<clipPath id="bogeClip">
<rect x="0" y="0" height="100%" width="100%"/>
</clipPath>
</defs>
<use xlink:href="#bogePath"/>
<path id="bogeFinal" clip-path="url(#bogeClip)" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"></path>
</svg>

Modifying geometric attributes, such as width, is a new thing in SVG 2. Only Chrome has implemented that so far.
You will need to use a different method to animate your <rect>. For example, you could move it horizontally using a transform, instead of changing its width.
Update
It looks like there is a bug in Firefox at the moment, causing CSS selectors to not match elements in the <defs> section.
The solution is to use the logo as the clippath, and move a blue rectangle in and out instead.
svg#bogeLogo {
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#bogePath {
fill: transparent;
stroke: red;
stroke-width: 8;
}
svg#bogeLogo #bogeFinal {
fill: blue;
transition: all 1.4s ease-out !important;
transform: translateX(-2552px);
}
svg#bogeLogo:hover #bogeFinal {
transform: translateX(0px);
}
<svg id="bogeLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2551.2 2551.2" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<defs>
<path id="bogePath" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"/>
<clipPath id="bogeClip">
<use xlink:href="#bogePath"/>
</clipPath>
</defs>
<use xlink:href="#bogePath"/>
<g clip-path="url(#bogeClip)">
<rect id="bogeFinal" x="0" y="0" height="100%" width="100%"/>
</g>
</svg>

Animating a SVG with CSS transform and transition

I need help in this SVG animation I'm doing.
It features a doughnut chart animating. The maroon-colored part is supposed to rotate and fill up the space, similar to a infographic.
The problem is, the maroon-colored part is only half of the chart and it is hidden under the main chart, which then rotate to 'fill up' the chart but it cannot go any further than 50% of the chart because it then gets hidden again.
You'll understand more when playing with the rotation of the svg.
Any advice/solution to how I can alter my codes/SVG in Illustrator? (I have zero knowledge on XML so I wouldn't know what the XML codes mean.)
<figure>
<path id="right" class="st0" d="M196.8,0l-0.4,55.7c74.6,0.5,134.9,61.1,134.9,135.8c0,75-60.8,135.8-135.8,135.8
c-0.3,0-0.6,0-0.9,0l-0.4,55.7c0.4,0,0.8,0,1.2,0C301.3,383,387,297.3,387,191.5C387,86.2,302,0.7,196.8,0z"/>
<path id="left-bottom" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0
C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
<path id="left-top" class="st0" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0 C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
</svg>
Tryout: http://codepen.io/anon/pen/QdMrBY

Something like this?
#ring
{
width: 20%;
}
#right
{
}
#left-top
{
}
#left-bottom
{
fill: maroon;
transform: rotate(180deg);
transform-origin: 100% 50%;
transition: 1s;
}
#ring {
animation: spin infinite 10s linear;
}
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<figure>
<svg version="1.1" id="ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 390.5 383" style="enable-background:new 0 0 390.5 383;" xml:space="preserve">
<path id="right" class="st0" d="M196.8,0l-0.4,55.7c74.6,0.5,134.9,61.1,134.9,135.8c0,75-60.8,135.8-135.8,135.8
c-0.3,0-0.6,0-0.9,0l-0.4,55.7c0.4,0,0.8,0,1.2,0C301.3,383,387,297.3,387,191.5C387,86.2,302,0.7,196.8,0z"/>
<path id="left-bottom" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0
C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
<path id="left-top" class="st0" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0 C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
</svg>
</figure>