Unable to apply line drawing and filling it animation in svg - html

I want a line drawing animation and I tried to follow some youtube tutorials and I want something like this https://codepen.io/shshaw/pen/Hjyio which first draw the logo then fills it. Till now I tried this but failed miserably. I searched every other question on stack overflow question everyone tell about only line drawing animation but I want to fill it also.
Also I don't draw any line animation.
Any suggestion of where I am wrong and also adding px unit don't help at all ?
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<style>
path {
stroke:#000;
stroke-dasharray: 2500;
stroke-width:3;
animation: my_animation 100s;
}
#keyframes my_animation{
0%{
stroke-dashoffset: 0;
}
50%{
stroke-dashoffset: 2500;
}
100%{
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M479 320L639 0L318.99 0L-1 0L158.98 320L318.99 640L479 320Z" id="aLRf203Rm"></path><path d="M301.47 203.41L401.95 0L200.97 0L0 0L100.48 203.41L200.97 406.83L301.47 203.41Z" id="a1ManYbeyy"></path></defs><g><g><use xlink:href="#aLRf203Rm" opacity="1" fill="#ff0043" fill-opacity="1"></use><g><use xlink:href="#aLRf203Rm" opacity="1" fill-opacity="0" stroke="#ff0043" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#a1ManYbeyy" opacity="1" fill="#00ffda" fill-opacity="1"></use><g><use xlink:href="#a1ManYbeyy" opacity="1" fill-opacity="0" stroke="#00ffda" stroke-width="1" stroke-opacity="1"></use></g></g></g></svg>
</body>
</html>


Just use your keyframes. In this example, I have made the stroke animation run from time 0% to 80%. Then I make the fill fade in using fill-opacity from time 80% to 100%.
path {
stroke:#000;
stroke-dasharray: 2072;
stroke-width:3;
animation: my_animation 4s;
animation-fill-mode: forwards;
fill: red;
}
#keyframes my_animation{
0%{
stroke-dashoffset: 2072;
fill-opacity: 0;
}
80%{
stroke-dashoffset: 0;
fill-opacity: 0;
}
100%{
fill-opacity: 1;
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M479 320L639 0L318.99 0L-1 0L158.98 320L318.99 640L479 320Z" id="aLRf203Rm"></path><path d="M301.47 203.41L401.95 0L200.97 0L0 0L100.48 203.41L200.97 406.83L301.47 203.41Z" id="a1ManYbeyy"></path></defs><g><g><use xlink:href="#aLRf203Rm" opacity="1" fill="#ff0043" fill-opacity="1"></use><g><use xlink:href="#aLRf203Rm" opacity="1" fill-opacity="0" stroke="#ff0043" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#a1ManYbeyy" opacity="1" fill="#00ffda" fill-opacity="1"></use><g><use xlink:href="#a1ManYbeyy" opacity="1" fill-opacity="0" stroke="#00ffda" stroke-width="1" stroke-opacity="1"></use></g></g></g></svg>

Related

Centering CSS transform:scale on grouped objects [duplicate]

I'm having issues with the transform-origin while attempting to scale sub-elements.
While attempting to scale animate a box within a larger svg, it uses the transform origin (0,0) from the overall svg, rather than the center of the element I am trying to scale.
This makes it appear like it is "flying in from the top left" which is not what I am looking for. I am looking to make it scale from the elements center.
How do I get the transform-origin to be set relative to the specific element I am animating, without having to hardcode the (x,y) position of the sub-element itself.
Here is a simple example of the issue I'm dealing
#keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
animation: scaleBox 2s infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>

You need transform-box: fill-box;
#keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
transform-box: fill-box;
animation: scaleBox 2s infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>

SVG clipping mask not working as expected

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>

SVG straight line animation CSS

I am trying to achieve this (the picture below) in using SVG path for animation in a website. I saw this https://css-tricks.com/svg-line-animation-works/ and wanted to try it. But i am not sure how do i create the path out and the animation. Please do help me! Thanks

You can use svg code for animation. You can use CSS animation on svg paths.
.st0{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: draw1 4s linear forwards;
animation: draw1 4s linear forwards;
}
.st1{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 200;
stroke-dashoffset: 200;
-webkit-animation: draw2 3s linear 2s forwards;
animation: draw2 3s linear 2s forwards;
}
#-webkit-keyframes draw1{
to {stroke-dashoffset: 0;}
}
#keyframes draw1{
to {stroke-dashoffset: 0;}
}
#-webkit-keyframes draw2{
to {stroke-dashoffset: 0;}
}
#keyframes draw2{
to {stroke-dashoffset: 0;}
}
<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 614 53" style="enable-background:new 0 0 614 53;" xml:space="preserve">
<polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 "/>
<line class="st1" x1="307" y1="53" x2="307" y2="0"/>
</svg>

SVG solution
The animation uses the attribute <stroke-dashoffset> - the indent from the beginning of the line. At the maximum value of <stroke-dashoffset> the visible line is zero.
With the value of <stroke-dashoffset ="0"> the line acquires the maximum size.
It is necessary to accurately calculate the length of the line to avoid unpredictable effects in the animation.
In this example, the length of <line> is 53px, for <polyline> is 680px.
<style>
.st0{fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 680; stroke-dashoffset: 680;}
.st1{fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 53; stroke-dashoffset: 53;}
</style>
<svg version="1.1" viewBox="0 0 614 53" >
<polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 " >
<animate
attributeName="stroke-dashoffset"
from="680"
to="0"
dur="2s"
fill="freeze" />
</polyline>
<line class="st1" x1="307" y1="53" x2="307" y2="0">
<animate
attributeName="stroke-dashoffset"
from="53"
to="0"
dur="2s"
fill="freeze" />
</line>
</svg>

i want to animate this logo but for some reason it doesn't work

<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"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<defs>
<style>
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<title>logo</title>
<path class="path" d="M115.59,123.26l39.56-31c0.63-.5-0.26-1.38-0.88-0.88l-39.56,31c-0.63.5,0.26,1.38,0.88,0.88h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M94.71,73.09l35.54-.51a0.63,0.63,0,0,0,0-1.25l-35.54.51a0.63,0.63,0,0,0,0,1.25h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M95.1,121.61l0-86.41V22.81a0.63,0.63,0,0,0-1.25,0l0,86.41v12.39a0.63,0.63,0,0,0,1.25,0h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M155.15,91.35l-15.9-19.21c-0.51-.62-1.39.27-0.88,0.88l15.9,19.21c0.51,0.62,1.39-.27.88-0.88h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M154.57,52.56L138.36,72.14c-0.51.62,0.37,1.5,0.88,0.88l16.21-19.58c0.51-.62-0.37-1.5-0.88-0.88h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M114.71,22.13l39.56,31c0.63,0.49,1.52-.39.88-0.88l-39.56-31c-0.63-.49-1.52.39-0.88,0.88h0Z" transform="translate(-93.82 -21.1)" />
</svg>
i want this svg logo to looks like its drawn with css animation. can someone help me fix this problem. its already on the page it doesn't animate

Currently, your svg doesn't have a stroke (what you see is actually the fill). Remove the fill and add a stroke, and your animation will kick in:
.path {
stroke: black;
fill: none;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}

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>