This codepen is working in every browser, except Safari. It's not complicated, but I am pretty new to SVG and SMIL, so I might be missing something that isn't supported?
http://codepen.io/jaminroe/pen/rVoPRp
Simplified version, with only 2 shapes:
<svg height="100px" width="100px" viewBox="0 0 50 50" >
<path fill="#4E3BC1" >
<animate
attributeName="d"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1;"
values="M 0 50
c0-12 0-37 0-50 8 0 17 0 25 0 8 0 20 0 25 0 0 13 0 38 0 50-5 0-17 0-25 0-8 0-17 0-25 0
Z;
m 41 50
c-8 0-19 0-27 0-4-5-10-16-14-23 5-9 9-16 14-23 8 0 19 0 27 0 4 8 9 16 14 23-4 8-9 16-14 23
Z;"
/>
<animate
attributeName="fill"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1;"
values="#1eb287;
#1ca69e;"
/>
</path>
</svg>Thank you!
Remove the semicolon at the end in each of the keySplines attributes.
I am new to this as well, and just experienced the same problem. As you probably know, keyTimes needs to have exactly one more value than keySplines (In your case 2 keyTimes and 1 keySpline). The semicolon at the end of your keySplines attribute probably makes Safari assume, that there is a second value following, meaning you'd now have 2 keyTimes values and 2 keySplines values. This breaks the entire animation and nothing shows up.
Here is your snippet with the semicolons removed, working in Safari.
<svg height="100px" width="100px" viewBox="0 0 50 50" >
<path fill="#4E3BC1" >
<animate
attributeName="d"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1"
values="M 0 50
c0-12 0-37 0-50 8 0 17 0 25 0 8 0 20 0 25 0 0 13 0 38 0 50-5 0-17 0-25 0-8 0-17 0-25 0
Z;
m 41 50
c-8 0-19 0-27 0-4-5-10-16-14-23 5-9 9-16 14-23 8 0 19 0 27 0 4 8 9 16 14 23-4 8-9 16-14 23
Z;"
/>
<animate
attributeName="fill"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1"
values="#1eb287;
#1ca69e;"
/>
</path>
</svg>