SVG animates the dotted line around the cicle
I am trying to draw an animation line of a circle. I needed this to work on mobile, so I chose SVG. I have a great working example, but it is very inefficient and makes other animations on the page stutter.
This is what I have and what I am trying to achieve: http://jsfiddle.net/sj76ysqs/
<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 500 500"
preserveAspectRatio="xMidYMid"
style="width:100%; height:100%; position:absolute; top:0; left:0;">
<path d="M200,200 " id="bean-halo" fill="none" stroke="#FF0000" stroke-linecap="round" stroke-width="2.5" stroke-dasharray="0.1,10" />
</svg>
(function() {
var i = 0,
circle = document.getElementById('bean-halo'),
angle = 0,
radius = 167,
interval = 20,
d, radians, x, y, e;
window.timer = window.setInterval(function() {
angle -= 5;
angle %= 360;
radians = (angle / 180) * Math.PI;
x = 250 + Math.cos(radians) * radius;
y = 250 + Math.sin(radians) * radius;
e = circle.getAttribute('d');
d = e + (i === 0 ? ' M ' : ' L ') + x + ' ' + y;
if (angle === -5 && i !== 0) {
window.clearInterval(window.timer);
this.beanHaloisDrawn = 1;
}
circle.setAttribute('d', d);
i++;
}.bind(this), interval);
})()
I would like to use the following technique or something similar, but don't know enough about SVG to do this: http://css-tricks.com/svg-line-animation-works/
I also have a static dashed line that is masked by an animated line that shows it, but again, I don't know how.
Any help would be appreciated.
UPDATE: The solution should work with an element with an image as a background.
source to share
How easy it is to manipulate the dasharray of a circle
<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 500 500"
preserveAspectRatio="xMidYMid"
style="width:100%; height:100%; position:absolute; top:0; left:0;">
<circle cx="200" cy="200" r="167" id="bean-halo" fill="none" stroke="#FF0000" stroke-linecap="round" stroke-width="2.5" stroke-dasharray="0.1,20000" />
</svg>
along with something like this ...
(function() {
var angle = 0;
var circle = document.getElementById('bean-halo');
var dash="0.1,10 ";
var interval = 20;
window.timer = window.setInterval(function() {
circle.setAttribute("stroke-dasharray", dash + " 0, 20000");
dash = dash + "0.1,10 ";
if (angle >= 360) window.clearInterval(window.timer);
angle += 10.1/360;
}.bind(this), interval);
})()
If you don't want to use javascript, you will have to do the interpolation yourself, creating a huge animated one with all the intermediate steps. I did 4, but you get the gist. You can create an attribute using javascript and a loop though.
<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 500 500"
preserveAspectRatio="xMidYMid"
style="width:100%; height:100%; position:absolute; top:0; left:0;">
<circle cx="200" cy="200" r="167" stroke-width="1" stroke="red" fill="white">
<animate attributeName="stroke-dasharray"
values="1,10,0,20000;1,10,1,10,0,20000;1,10,1,10,1,10,0,20000;1,10,1,10,1,10,1,10,0,20000"
dur="4s" repeatCount="1" fill="freeze" />
</circle>
</svg>
source to share
Animation trick using two circles, no coding needed: -
<svg width="400" height="400" viewBox="0 0 400 400" >
<circle cx="200" cy="200" r="167" stroke-dasharray="1,6" stroke-width="1" stroke="red" fill="white" />
<circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200 " stroke-width="3" stroke-dashoffset="0" stroke="white" fill="none">
<animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="1200" dur="4s" repeatCount="1" fill="freeze" />
</circle>
</svg>
source to share