26 lines
699 B
HTML
26 lines
699 B
HTML
<html class="reftest-wait">
|
|
<script>
|
|
var i = 0;
|
|
var opac = [0.3, 0.2, 0, 0.3];
|
|
|
|
function f() {
|
|
document.getElementById("rim").setAttribute("opacity", opac[i]);
|
|
document.getElementById("circ").setAttribute("r", i + 10);
|
|
i++;
|
|
if (i > opac.length) {
|
|
document.documentElement.className = ""
|
|
} else {
|
|
requestAnimationFrame(f);
|
|
}
|
|
}
|
|
onload = () => requestAnimationFrame(f);
|
|
</script>
|
|
|
|
<body>
|
|
<svg height="1000" width="1000">
|
|
<circle cx="50" cy="50" r="40" fill="red" />
|
|
<g id=rim clip-path="url(#myClip)" opacity=0>
|
|
<circle id="circ" cx="150" cy="150" r="40" fill="red" />
|
|
</g>
|
|
<circle cx="250" cy="250" r="40" fill="red" />
|
|
</svg>
|