Odd shape SVG Animation - css

Question

I have this so far on codepen
https://codepen.io/phfilly/pen/gXbmmO?editors=1100
<div class="container">
<svg viewBox="-5 0 62.772 74.316" class="logo">
<path d="M43.034,33.66" class="logo-line"></path>
<path d="M9.607,33.012" class="logo-line-1"></path>
<path class="logo-line-two" d="M26.256,54.721c-9.245,0-16.766-7.59-16.766-16.92c0-4.496,1.729-8.73,4.867-11.921L33.171,6.882l5.514,5.561
l-6.921,6.99l6.344,6.4c0,0,0,0.001,0.001,0.001l0.002,0.002c3.168,3.196,4.911,7.445,4.911,11.964
C43.021,47.129,35.501,54.721,26.256,54.721z M26.253,24.995l-6.373,6.436c-1.67,1.698-2.595,3.965-2.595,6.37
c0,4.992,4.024,9.054,8.97,9.054c4.946-0.001,8.972-4.062,8.972-9.054c0-2.419-0.934-4.692-2.631-6.404L26.253,24.995z"></path>
<path class="logo-line-three" d="M26.387,64.316c-7.049,0-13.675-2.77-18.659-7.799C2.744,51.488-0.001,44.801,0,37.688
c0-7.076,2.722-13.739,7.663-18.763L26.394,0l5.515,5.56L13.186,24.476c-3.474,3.532-5.391,8.227-5.391,13.212
c0,5.012,1.933,9.725,5.444,13.268c3.511,3.543,8.181,5.494,13.147,5.494c10.252,0,18.591-8.416,18.591-18.762
c0-5.015-1.936-9.729-5.45-13.272h0.001l-9.11-9.192l5.512-5.564l9.114,9.199c4.984,5.028,7.729,11.715,7.729,18.83
C52.772,52.37,40.936,64.316,26.387,64.316z"></path>
</svg></div>
.logo path {
/* fill: #ff5825; */
/* transition: fill 0.5s; */
}
.container {
width: 100px;
display: block;
margin: auto;
padding: 50px 15px;
}
.logo-line-two, .logo-line-three {
fill: transparent;
stroke: #ff5825;
stroke-width: 1px;
stroke-dasharray: 320 320;
stroke-dashoffset: -300;
animation: dash 6s linear .5s infinite alternate;
}
#keyframes dash {
0% {
stroke-dashoffset: -300;
}
30% {
stroke-dashoffset: 0;
}
60% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -300;
}
}
but I’m lacking a bit of knowledge on the SVG animation side of things. I would like to animate the fill colour instead (which i commented out to show the animation i’m after) and not necessarily the stroke-dash.
From my findings and research it seems that this can only be achieved by using a clipPath or is there an easier way around it? I’m not sure what attributes to use as the clipPath if that is the way.
Any help or guidelines will be greatly appreciated.

Answer 1

Animating fills can be messy and complicated. Since your logo consists of line segments with constant width, it makes more sense to draw it as an animated path with a stroke that matches the width of these line segments.
This is a vague approximation of what you're after; you'll have to sort out the geometry yourself.
#logo {
stroke-dasharray: 1100;
stroke-dashoffset: 1100;
animation: draw 2s forwards;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="125" height="150" viewBox="0 0 250 300">
<g transform="translate(125,170)">
<path id="logo" stroke="#000" stroke-width="30"
fill="none" stroke-linecap="butt"
d="M10.6-152.0-70.7-70.7A100 100 0 1 0 70.7-70.7L28.7
-112.7-42-42A59.4 59.4 0 1 0 42-42L10.6-73.4"
/>
</svg>
Note: If you're not sure what's going on in the <path> element, you should perhaps read up on SVG's elliptical arc commands.

Answer 2

The three (?) parts of your logo all have consistent width, so just redraw your logo using three thick lines rather than three outlines.