-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
124 lines (114 loc) · 10.4 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html ng-app="svgCircus">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SVG animation tool | SVG Circus</title>
<meta name="description" content="SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- OpenGraph -->
<meta property="og:title" content="SVG animation tool | SVG Circus" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="SVG Circus" />
<meta property="og:image" content="http://svgcircus.com/imgs/icons/og_image.png" />
<meta property="og:url" content="http://svgcircus.com/" />
<meta property="og:description" content="Online app enabling you to create cool SVG animations in seconds" />
<!-- Fav and touch icons -->
<link rel="apple-touch-icon" sizes="57x57" href="./imgs/icons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="./imgs/icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="60x60" href="./imgs/icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="./imgs/icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="72x72" href="./imgs/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="./imgs/icons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="76x76" href="./imgs/icons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="./imgs/icons/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="./imgs/icons/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="./imgs/icons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="./imgs/icons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="./imgs/icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./imgs/icons/favicon-16x16.png" sizes="16x16">
<meta name="msapplication-TileColor" content="#DFDFD0">
<meta name="msapplication-TileImage" content="./imgs/icons/mstile-144x144.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/svg-circus.css"/>
</head>
<body>
<div id="svgCircus" ng-controller="svgCircusCtrl">
<div id="svgCircus_loader" ng-show="!appLoaded">
<div>Loading. Please wait...</div>
<div>
<svg id="SVG-Circus-dd31d623-9447-76c4-61d3-264c466115fa" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><circle id="actor_1" x="50" y="75" r="5" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></circle><circle id="actor_2" x="50" y="75" r="5" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></circle><circle id="actor_3" x="50" y="75" r="5" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray=""></circle><script type="text/ecmascript"><![CDATA[(function(){var actors={};actors.actor_1={node:document.getElementById("SVG-Circus-dd31d623-9447-76c4-61d3-264c466115fa").getElementById("actor_1"),type:"circle",cx:50,cy:75,dx:10,dy:12,opacity:1};actors.actor_2={node:document.getElementById("SVG-Circus-dd31d623-9447-76c4-61d3-264c466115fa").getElementById("actor_2"),type:"circle",cx:50,cy:75,dx:10,dy:12,opacity:1};actors.actor_3={node:document.getElementById("SVG-Circus-dd31d623-9447-76c4-61d3-264c466115fa").getElementById("actor_3"),type:"circle",cx:50,cy:75,dx:10,dy:12,opacity:1};var tricks={};tricks.trick_1=(function(t,e){e=(function(n){return.5>n?2*n*n:-1+(4-2*n)*n})(e)%1,e=e*4%1,e=0>e?1+e:e;var _=t.node,c=t.cx-25*Math.cos(-90*Math.PI/180),a=t.cy+25*Math.sin(-90*Math.PI/180);switch(c+=25*Math.cos((-90-360*e*1)*Math.PI/180),a-=25*Math.sin((-90-360*e*1)*Math.PI/180),t.type){case"circle":_.setAttribute("cx",c),_.setAttribute("cy",a);break;case"square":_.setAttribute("x",c-t.dx/2),_.setAttribute("y",a-t.dx/2)}});tricks.trick_2=(function(t,i){i=(function(n){return.5>n?2*n*n:-1+(4-2*n)*n})(i)%1,i=0>i?1+i:i;var _=t.node;0.1>=i?_.setAttribute("opacity",i*(t.opacity/0.1)):i>=0.9?_.setAttribute("opacity",t.opacity-(i-0.9)*(t.opacity/(1-0.9))):_.setAttribute("opacity",t.opacity)});var scenarios={};scenarios.scenario_1={actors: [actors.actor_1,actors.actor_2,actors.actor_3],tricks: [{trick: tricks.trick_1,start:0,end:1},{trick: tricks.trick_2,start:0,end:1}],startAfter:0,duration:6000,actorDelay:300,repeat:0,repeatDelay:1000};var _reqAnimFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,fnTick=function(r){for(var a in scenarios)for(var e=scenarios[a],t=r-e.startAfter,i=0,n=e.actors.length;n>i;i++){var o=0;if(t>=0){var m=e.duration+e.repeatDelay;e.repeat>0&&t>m*e.repeat&&(o=1),o+=t%m/e.duration}if(e.actors[i].node)for(var s=0,c=e.tricks.length;c>s;s++){var f=e.tricks[s],w=(o-f.start)*(1/(f.end-f.start));f.trick(e.actors[i],Math.max(0,Math.min(1,w)))}t-=e.actorDelay}_reqAnimFrame(fnTick)};_reqAnimFrame(fnTick);})()]]></script></svg>
</div>
</div>
<div id="svgCircus_areaNavOptions" ng-cloak>
<sc-nav id="svgCircus_areaNav"></sc-nav>
<sc-options id="svgCircus_areaOptions"></sc-options>
</div>
<div id="svgCircus_areaArenaSVG" ng-cloak>
<div id="svgCircus_areaArenaMenu">
<sc-preset-manager id="svgCircus_areaPresetManager"></sc-preset-manager>
<button ng-click="exportSVG()">Export SVG</button>
</div>
<sc-arena id="svgCircus_areaArena"></sc-arena>
<div id="svgCircus_areaArenaSubMenu">
</div>
</div>
<div id="svgCircus_smallScreen">
<div class="svgCircus_smallScreen_pic"></div>
<div class="svgCircus_smallScreen_text">
<div class="svgCircus_smallScreen_text1">
Your screen size is not supported :(
</div>
<div class="svgCircus_smallScreen_text2">
Please open the app on your <span>laptop</span> or <span>desktop</span>.
</div>
</div>
</div>
</div>
<div id="svgCircus_credits">
<div id="svgCircus_logo"></div>
<div id="svgCircus_descr">
SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds.
</div>
<div class="svgCircus_link">
<a href="https://github.com/alexk111/SVG-Circus" target="_blank" class="github">
<svg viewBox="0 0 20 20">
<path d="M 10.0704 0.2631 C 4.6188 0.2631 0.198 4.5934 0.198 9.9359 C 0.198 14.2088 3.0266 17.834 6.9502 19.1132 C 7.4439 19.2019 7.6241 18.9032 7.6241 18.647 C 7.6241 18.4173 7.6155 17.8091 7.6108 17.0019 C 4.8644 17.5864 4.285 15.7054 4.285 15.7054 C 3.836 14.588 3.1888 14.2906 3.1888 14.2906 C 2.2924 13.6904 3.2566 13.7026 3.2566 13.7026 C 4.2474 13.771 4.7689 14.6993 4.7689 14.6993 C 5.6496 16.1774 7.0796 15.7506 7.6422 15.503 C 7.7318 14.8779 7.9869 14.4518 8.269 14.21 C 6.0766 13.9658 3.7718 13.1361 3.7718 9.4297 C 3.7718 8.3738 4.1565 7.5104 4.7881 6.8343 C 4.6866 6.5896 4.3477 5.6062 4.8849 4.2745 C 4.8849 4.2745 5.7138 4.0145 7.5998 5.2661 C 8.3873 5.0515 9.232 4.9443 10.0716 4.9405 C 10.91 4.9443 11.7546 5.0515 12.5433 5.2661 C 14.4281 4.0145 15.2556 4.2745 15.2556 4.2745 C 15.7942 5.6062 15.4553 6.5896 15.3538 6.8343 C 15.9866 7.5104 16.3686 8.3738 16.3686 9.4297 C 16.3686 13.1454 14.0603 13.9629 11.8608 14.2024 C 12.2154 14.501 12.5311 15.0913 12.5311 15.9936 C 12.5311 17.2866 12.519 18.3298 12.519 18.647 C 12.519 18.9056 12.6969 19.2065 13.1979 19.112 C 17.1177 17.8305 19.9439 14.2076 19.9439 9.9359 C 19.9439 4.5934 15.5231 0.2631 10.0704 0.2631 Z" />
</svg>
View on GitHub
</a>
</div>
<div class="svgCircus_link">
<a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Ftwitter.com%2Fabout%2Fresources%2Fbuttons&source=tweetbutton&text=SVG Circus%20-%20Create%20Cool%20SVG%20Animations%20in%20seconds&url=http%3A%2F%2Fsvgcircus.com&via=svgcircus" target="_blank" class="twitter">
<svg viewBox="0 0 20 16">
<path d="M 20 1.7757 C 15.6217 6.235 14.2216 21.5177 1 13.3036 C 3.0457 13.5498 5.112 12.9716 6.7616 11.7445 C 4.9328 11.5898 1.0208 9.9153 4.8684 9.0448 C 3.6372 9.1752 1.5736 6.7464 1.7573 5.2767 L 3.5021 5.7531 L 3.517 5.7458 C 1.5958 4.4437 1.5982 2.5949 2.3142 0.6929 C 3.8027 2.4596 5.7245 3.5784 7.9125 4.2589 C 8.6712 4.4949 9.4827 4.5506 10.2662 4.6487 L 10.3553 4.6487 C 10.3317 2.631 11.11 0.4896 13.3547 0.0722 C 15.3672 -0.302 18.1067 1.4049 20 1.7757 Z" />
</svg>
Share on twitter
</a>
</div>
<div class="svgCircus_link">
<a href="https://twitter.com/intent/user?screen_name=svgcircus" target="_blank" class="twitter">
<svg viewBox="0 0 20 16">
<path d="M 20 1.7757 C 15.6217 6.235 14.2216 21.5177 1 13.3036 C 3.0457 13.5498 5.112 12.9716 6.7616 11.7445 C 4.9328 11.5898 1.0208 9.9153 4.8684 9.0448 C 3.6372 9.1752 1.5736 6.7464 1.7573 5.2767 L 3.5021 5.7531 L 3.517 5.7458 C 1.5958 4.4437 1.5982 2.5949 2.3142 0.6929 C 3.8027 2.4596 5.7245 3.5784 7.9125 4.2589 C 8.6712 4.4949 9.4827 4.5506 10.2662 4.6487 L 10.3553 4.6487 C 10.3317 2.631 11.11 0.4896 13.3547 0.0722 C 15.3672 -0.302 18.1067 1.4049 20 1.7757 Z" />
</svg>
Follow @svgcircus
</a><br/>for updates
</div>
<div id="svgCircus_madeby">
Made by <a href="https://twitter.com/alex_kaul" target="_blank">@alex_kaul</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="./js/svg-circus.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-377715-15', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>