I can't think my way through this one... I can't really add mark-up in a project, only CSS (for many boring reasons with who I'm collaborating remotely with).
The end client wants a loading animation of their logo path being drawn but not linear, more ease-in-out (slow-fast-slow) sort of thing. To illustrate what I mean, see jsfiddle I've done: https://jsfiddle.net/tobzzzz/djf7oth2/ (their logo is a bit like a speech mark, I've done a circle for ease for the demo).
The logo will sit on top of an image background, not a white/solid colour background, so my fiddle solution won't work of two circles layered. I added light grey background to demonstrate how it doesn't work.
The IDEAL solution would be SVG only (using SVG animation not CSS animation), I'd then convert it into data and put it as a background-image.
If it can't be done with SVG animation only, I'd like to know if it can be done with SVG and CSS combo. But it absolutely 100% cannot be JS.
Any good ideas?
body {
background: #eee
}
.black {
stroke-dasharray: 350;
stroke-dashoffset: 350;
animation: dash 4s linear infinite;
}
.white {
stroke-dasharray: 350;
stroke-dashoffset: 350;
animation: dash2 4s ease-in-out infinite;
}
@keyframes dash {
80% {
stroke-dashoffset: 0;
}
}
@keyframes dash2 {
100% {
stroke-dashoffset: 0;
}
}
<svg class="path" width="84" height="84" xmlns="http://www.w3.org/2000/svg">
<path class="black" fill="none" stroke="#000000" stroke-width="4" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
<path class="white" fill="none" stroke="white" stroke-width="5" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
</svg>