html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<!-- Created by BroFarOps as an example of circle animation -->
<!-- ReCreated by BroFarOps as a click count game for speed and accuracy -->
<head>
<title>svg circle animation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#XMLID_4_{ stroke-dasharray: 1000; stroke-dashoffset: 2000; fill: #FFFF00; stroke: #00fe00; }
svg:hover #XMLID_4_{ -webkit-animation: draw 3s forwards; animation: draw 3s; }
@keyframes draw{ from{ stroke-dashoffset: 1000; fill:#00FF00; stroke:#00ff00; } to{ stroke-dashoffset: 0; } }
@-webkit-keyframes draw{ from{ stroke:#ff5535; stroke-dashoffset: 1000; } to{ stroke-dashoffset: 0; } }
</style>
</head>
<body> <button type="button" onClick="onClick()">Clicks: <a id="clicks">0</a><div id="countdown"></div>
<svg width="340" height="480" xmlns="http://www.w3.org/2000/svg">
<g>
<circle id="mygreen" r="30" cx="50" cy="50" fill="green" /> <animate xlink:href="#mygreen" attributeName="cx" from="50" to="300" dur="1s" begin="click" fill="freeze" />
</g>
<g>
<circle id="XMLID_4_" stroke-width="3" stroke-miterlimit="10" cx="166.5" cy="135.6" r="44.7"/> <animate xlink:href="#XMLID_4_" attributeName="cy" from="50" to="375" dur="1s" begin="click" fill="freeze" />
</g>
<g>
<circle id="mylime" r="30" cx="50" cy="50" fill="lime" /> <animate xlink:href="#mylime" attributeName="cy" from="450" to="50" dur="1s" begin="click" fill="freeze" />
</g>
<g>
<circle id="mylime2" r="30" cx="300" cy="50" fill="lime" /> <animate xlink:href="#mylime2" attributeName="cy" from="50" to="450" dur="1s" begin="click" fill="freeze" />
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* -- Created by BroFarOps as an example of circle animation -->
<!-- ReCreated by BroFarOps as a click count game for speed and accuracy -- */
//standard click counter
var clicks = 0; function onClick() { clicks += 1; document.getElementById("clicks").innerHTML = clicks; };
// 60 second timer
var timeleft = 60;
var downloadTimer = setInterval(function(){ document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
timeleft -= 1;
if(timeleft <= 0){ clearInterval(downloadTimer); document.getElementById("countdown").innerHTML = "<h1 style ='color:red;'>Stop / Finished<h1>" } }, 1000);
/* -- Created by BroFarOps as an example of circle animation -->
<!-- ReCreated by BroFarOps as a click count game for speed and accuracy -- */
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run