-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcursors.html
90 lines (83 loc) · 6.97 KB
/
cursors.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
<head>
<title>cursors</title>
<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-2714808-24', 'meteor.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="body" style="background-color: {{color}}">
{{> cursors}}
{{> brushes}}
</div>
{{> logo}}
{{> username}}
{{> colorpicker}}
</body>
<template name="brushes">
{{#each brush}}
<div class="brush" style="background: -webkit-radial-gradient(closest-corner, #{{fill}}, #{{fill}} 25%, transparent 70%); -webkit-transform: translateX({{x}}px) translateY({{y}}px); opacity: {{opacity}};"></div>
{{/each}}
</template>
<template name="cursors">
{{#each cursor}}
<div class="c id-{{_id}} {{clicking}}" style="-webkit-transform: translateX({{x}}px) translateY({{y}}px); -webkit-filter: blur({{blur}}px); opacity: {{opacity}}">
{{#unless isMyCursor}}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="25" height="30" class="point">
<g transform="matrix(1.25,0,0,-1.25,0,50)">
<g transform="translate(12.1958,21.9414)" class="fill" style="fill: #{{fill}}">
<path d="M 0,0 -1.765,-0.941 -5.529,6.117 -3.765,7.059 0,0 z" />
</g>
<g transform="translate(5,35.186)" class="fill" style="fill: #{{fill}}">
<path d="m 0,0 0,-11.188 3.258,3.145 4.767,0 L 0,0 z" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40" class="click">
<defs>
<clipPath>
<path d="M 0,32 32,32 32,0 0,0 0,32 z"/>
</clipPath>
</defs>
<g transform="matrix(1.25,0,0,-1.25,0,40)" class="fill" style="fill: #{{fill}}">
<g>
<g>
<g transform="translate(11.3315,11.6201)" class="fill" style="fill: #{{fill}}">
<path d="M 0,0 C -0.284,0.359 -0.629,1.093 -1.243,1.984 -1.591,2.488 -2.454,3.437 -2.711,3.919 -2.934,4.345 -2.91,4.536 -2.857,4.889 -2.763,5.517 -2.119,6.006 -1.432,5.94 -0.913,5.891 -0.473,5.548 -0.077,5.224 0.162,5.029 0.456,4.65 0.633,4.436 0.796,4.24 0.836,4.159 1.01,3.927 1.24,3.62 1.312,3.468 1.224,3.806 1.153,4.302 1.037,5.149 0.869,5.898 0.741,6.466 0.71,6.555 0.588,6.991 0.459,7.455 0.393,7.78 0.272,8.272 0.188,8.62 0.037,9.331 -0.004,9.731 -0.061,10.278 -0.091,11.17 0.26,11.58 0.535,11.901 1.166,11.998 1.557,11.8 2.069,11.541 2.36,10.797 2.493,10.5 2.732,9.966 2.88,9.349 3.009,8.539 3.173,7.508 3.475,6.077 3.485,5.776 3.509,6.145 3.417,6.922 3.481,7.276 3.539,7.597 3.809,7.97 4.147,8.071 4.433,8.156 4.768,8.187 5.063,8.126 5.376,8.062 5.706,7.838 5.829,7.627 6.191,7.003 6.198,5.728 6.213,5.796 6.299,6.172 6.284,7.025 6.497,7.38 6.637,7.614 6.994,7.825 7.184,7.859 7.478,7.911 7.839,7.927 8.148,7.867 8.397,7.818 8.734,7.522 8.825,7.38 9.043,7.036 9.167,6.063 9.204,5.722 9.219,5.581 9.278,6.114 9.497,6.458 9.903,7.097 11.34,7.221 11.395,5.819 11.42,5.165 11.415,5.195 11.415,4.755 11.415,4.238 11.403,3.927 11.375,3.553 11.344,3.153 11.258,2.249 11.133,1.811 11.047,1.51 10.762,0.833 10.481,0.427 c 0,0 -1.074,-1.25 -1.191,-1.813 -0.118,-0.562 -0.079,-0.566 -0.102,-0.965 -0.023,-0.398 0.121,-0.922 0.121,-0.922 0,0 -0.802,-0.104 -1.234,-0.035 -0.391,0.063 -0.875,0.841 -1,1.079 C 6.903,-1.901 6.536,-1.964 6.393,-2.206 6.168,-2.589 5.684,-3.276 5.342,-3.319 4.674,-3.403 3.288,-3.35 2.203,-3.339 c 0,0 0.185,1.011 -0.227,1.358 -0.305,0.259 -0.83,0.784 -1.144,1.06 L 0,0 z" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<g transform="translate(11.3315,11.6201)" class="fill" style="fill: #{{fill}}">
<path
d="M 0,0 C -0.284,0.359 -0.629,1.093 -1.243,1.984 -1.591,2.488 -2.454,3.437 -2.711,3.919 -2.934,4.345 -2.91,4.536 -2.857,4.889 -2.763,5.517 -2.119,6.006 -1.432,5.94 -0.913,5.891 -0.473,5.548 -0.077,5.224 0.162,5.029 0.456,4.65 0.633,4.436 0.796,4.24 0.836,4.159 1.01,3.927 1.24,3.62 1.312,3.468 1.224,3.806 1.153,4.302 1.037,5.149 0.869,5.898 0.741,6.466 0.71,6.555 0.588,6.991 0.459,7.455 0.393,7.78 0.272,8.272 0.188,8.62 0.037,9.331 -0.004,9.731 -0.061,10.278 -0.091,11.17 0.26,11.58 0.535,11.901 1.166,11.998 1.557,11.8 2.069,11.541 2.36,10.797 2.493,10.5 2.732,9.966 2.88,9.349 3.009,8.539 3.173,7.508 3.475,6.077 3.485,5.776 3.509,6.145 3.417,6.922 3.481,7.276 3.539,7.597 3.809,7.97 4.147,8.071 4.433,8.156 4.768,8.187 5.063,8.126 5.376,8.062 5.706,7.838 5.829,7.627 6.191,7.003 6.198,5.728 6.213,5.796 6.299,6.172 6.284,7.025 6.497,7.38 6.637,7.614 6.994,7.825 7.184,7.859 7.478,7.911 7.839,7.927 8.148,7.867 8.397,7.818 8.734,7.522 8.825,7.38 9.043,7.036 9.167,6.063 9.204,5.722 9.219,5.581 9.278,6.114 9.497,6.458 9.903,7.097 11.34,7.221 11.395,5.819 11.42,5.165 11.415,5.195 11.415,4.755 11.415,4.238 11.403,3.927 11.375,3.553 11.344,3.153 11.258,2.249 11.133,1.811 11.047,1.51 10.762,0.833 10.481,0.427 c 0,0 -1.074,-1.25 -1.191,-1.813 -0.118,-0.562 -0.079,-0.566 -0.102,-0.965 -0.023,-0.398 0.121,-0.922 0.121,-0.922 0,0 -0.802,-0.104 -1.234,-0.035 -0.391,0.063 -0.875,0.841 -1,1.079 C 6.903,-1.901 6.536,-1.964 6.393,-2.206 6.168,-2.589 5.684,-3.276 5.342,-3.319 4.674,-3.403 3.288,-3.35 2.203,-3.339 c 0,0 0.185,1.011 -0.227,1.358 -0.305,0.259 -0.83,0.784 -1.144,1.06 L 0,0 z" style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
<g transform="translate(19.5664,11.2656)">
<path d="M 0,0 0,3.459" style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
<g transform="translate(17.5508,11.2539)">
<path d="M 0,0 -0.016,3.473" style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
<g transform="translate(15.5547,14.6953)">
<path d="M 0,0 0.021,-3.426" style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
</g>
</g>
</g>
</svg>
{{/unless}}
<div class="animation ripple"><div></div></div>
<div class="name">{{name}}</div>
</div>
{{/each}}
</template>
<template name="logo">
<div id="logo"><a href="http://q42.com"><img src="http://static.q42.nl/images/q42-logo.svg"></a></div>
</template>
<template name="username">
<div id="name"><input type="text" placeholder="Your name?" value="{{name}}"></div>
</template>
<template name="colorpicker">
<div id="colorpicker"><input type="color" value="{{color}}"></div>
</template>