Animating logo with SVG and CSS keyframes - css

Question

I'm using CSS keyframes and SVG to animate my company logo, which should be a fairly straight forward process but I must have missed something because as you can see in the JS Fiddle below it has a thin inside fill within the white line. I want the characters to be a single white line only.
I've set the fill to none and the font which the logo is based is outlined into one single path, so not sure what can be causing this?
https://jsfiddle.net/nzz970aL/1/
Markup
<div class="placeholder">
<svg 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="35.6 317.2 863.3 110.8" enable-background="new 35.6 317.2 863.3 110.8" xml:space="preserve">
<path class="logo" fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="4" d="M86.8 349.2c0-12.2-9.7-21.9-21.9-21.9s-22.3 9.9-22.3 21.9c0 12.2 10.7 18.8 22.1 22.1 15.1 4.3 27.5 12.2 27.5 27.5 0 15.1-12.2 27.7-27.5 27.7s-27.5-12.6-27.5-27.7c0.2-1.6 1.2-2.5 2.9-2.5 1.4 0 2.7 0.8 2.7 2.3 -0.2 12.2 9.7 22.3 21.9 22.3s21.9-10.1 21.9-22.1c0-12.2-10.5-19.2-21.9-21.9 -14.5-3.7-27.5-12.2-27.5-27.7 0-14.9 12.4-27.5 27.7-27.5s27.3 12.4 27.3 27.5c-0.2 1.9-1.4 2.7-2.7 2.7C87.7 351.9 86.8 350.9 86.8 349.2L86.8 349.2zM227.3 422.3v0.8c0 1.7-1 2.7-2.7 2.7 -1.2 0-1.7-0.4-2.3-1.2l-46.5-91.9 -45 87.6h43.4c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-52.7l54.1-105.2L227.3 422.3zM281.7 328.1h-37.6c-1.7 0-2.5-1-2.5-2.7s1-2.7 2.7-2.7h77.9c1.7 0 2.7 1.2 2.7 2.7 0 1.7-1 2.7-2.7 2.7h-34.9v94.6c0 1.9-1 3.1-2.7 3.1s-2.7-1-2.7-2.7v-95H281.7zM361 325.2c0-1.7 1-2.7 2.7-2.7s2.7 1 2.7 2.7v57.2c0 20.7 17.4 38.2 38.2 38.2 21.1 0 38.2-17.2 38.2-38.2v-56.8c0-1.7 1-2.9 2.7-2.9 1.7 0 2.7 1 2.7 2.7v57.2c0 24-19.6 43.6-43.6 43.6S361 406.6 361 382.5L361 325.2 361 325.2zM490.3 322.7h35.5c19.8 0 35.3 15.7 35.3 35.3 0 17.6-12.6 32.2-29.3 34.9l27.9 28.1h-0.2c0.8 0.6 1.2 1.6 1.2 2.1 0 1.7-1 2.7-2.7 2.7 -1.2 0-1.6-0.2-2.1-1L524 393.2h-28.3v29.7c0 2.1-1 3.3-2.7 3.3s-2.7-1-2.7-2.7L490.3 322.7 490.3 322.7zM495.7 387.8h30c16.3 0 29.7-13.6 29.7-29.8s-13.4-29.8-29.7-29.8h-30L495.7 387.8 495.7 387.8zM701.7 422.3v0.8c0 1.7-1 2.7-2.7 2.7 -1.2 0-1.7-0.4-2.3-1.2l-46.3-91.9 -45 87.6h43.4c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-52.7l54.1-105.2L701.7 422.3zM756.2 328.1h-37.6c-1.7 0-2.5-1-2.5-2.7s1-2.7 2.7-2.7h77.9c1.7 0 2.7 1.2 2.7 2.7 0 1.7-1 2.7-2.7 2.7h-34.9v94.6c0 1.9-1 3.1-2.7 3.1 -1.7 0-2.7-1-2.7-2.7v-95H756.2zM840.9 376.1v44.2h53.7c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-59.5V322.7h59.1c1.9 0 3.1 1 3.1 2.7s-1 2.7-2.7 2.7h-53.9c0 7.4-0.2 14.1-0.2 21.3v21.1h8.7c2.1 0 3.1 1 3.1 2.7s-0.8 2.7-2.7 2.7h-8.9V376.1z"/>
</svg>
</div>
CSS
* {
margin: 0;
border: 0;
}
body {
background: #000;
}
.placeholder {
position: absolute;
top: 50%;
text-align: center;
z-index: 99;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
svg {
max-width: 480px;
}
.logo {
stroke-dasharray:1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}