-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
82 lines (80 loc) · 4.53 KB
/
index.html
File metadata and controls
82 lines (80 loc) · 4.53 KB
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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Care Bear NEEDS Love (mousedown/touchstart) 🐻❤️</title>
<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="backdrop"></div>
<div class="hearts"></div><span title="Hold mouse/finger down">
<svg class="care-bear" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 59.068209 54.91329">
<g transform="translate(-70.967674 -112.10752)">
<g class="care-bear__ear care-bear__ear--right" transform="translate(19.587616 -5.1859387)">
<circle r="5.953125" cy="124.5695" cx="89.267891"></circle>
<circle cx="89.267891" cy="124.5695" r="4.3193078"></circle>
</g>
<g class="care-bear__ear care-bear__ear--left" transform="translate(3.1834476 -5.1859387)">
<circle cx="89.267891" cy="124.5695" r="5.953125"></circle>
<circle r="4.3193078" cy="124.5695" cx="89.267891"></circle>
</g>
<g class="care-bear__arm care-bear__arm--right">
<rect transform="matrix(.69012 .7237 .69116 -.7227 0 0)" ry="2.5978234" y="-19.412512" x="174.93823" height="19.637407" width="5.1956468"></rect>
</g>
<g class="care-bear__arm care-bear__arm--left">
<rect width="5.1956468" height="19.637407" x="29.517857" y="-165.03149" ry="2.5978234" transform="matrix(-.69012 .7237 -.69116 -.7227 0 0)"></rect>
</g>
<g class="care-bear__feet">
<path d="M94.1591085 159.39647033l1.13016505 3.97753411a5.29166634 5.29166634 0 00-.59738153-.03824023 5.29166634 5.29166634 0 00-5.02863109 3.68504783h21.7004818a5.29166634 5.29166634 0 00-5.0301842-3.68504783 5.29166634 5.29166634 0 00-.5968603.03720836l1.12964647-3.97650224z"></path>
</g>
<g class="care-bear__head">
<circle cx="100.51268" cy="128.75888" r="13.229167"></circle>
</g>
<g class="care-bear__belly">
<circle cx="100.51268" cy="149.04999" r="13.229167"></circle>
<circle cx="100.51268" cy="149.04999" r="8.598958"></circle>
<g class="care-bear__heart">
<path d="M98.30347449 144.82645224c-.65124542 0-1.3024231.24925602-1.80144155.74827342-.99803372.99803478-.99803372 2.60484935 0 3.6028815l.4919599.49299282 3.60339796 3.6028815 3.60339744-3.6028815.32246093-.32297687c.99803744-.99803479.99803744-2.60536265 0-3.60339743-.49901474-.4990174-1.15013845-.748792-1.80144207-.748792-.65130097 0-1.30293797.2497746-1.80195536.748792l-.32246094.32297687-.49196095-.4924769c-.4990174-.49901739-1.1507126-.7482734-1.80195536-.7482734z"></path>
</g>
</g>
<g class="care-bear__muzzle">
<circle cx="100.29227" cy="132.97391" r="5.9451938"></circle>
</g>
<g class="care-bear__nose">
<ellipse cx="100.29227" cy="129.55186" rx="1.5612032" ry="1.1618258"></ellipse>
</g>
<g class="care-bear__eye care-bear__eye--right" transform="translate(17.991638)">
<circle cx="91.364403" cy="128.15633" r="1.3229166"></circle>
<g class="care-bear__pupil care-bear__pupil--right">
<circle cx="91.89357" cy="127.62716" r=".26458332" fill="#fff"></circle>
</g>
</g>
<g class="care-bear__eye care-bear__eye--left">
<circle r="1.3229166" cy="128.15633" cx="91.364403"></circle>
<g class="care-bear__pupil care-bear__pupil--left">
<circle r=".26458332" cy="127.62716" cx="91.89357" fill="#fff"></circle>
</g>
</g>
<g class="care-bear__cheek care-bear__cheek--left">
<circle cx="91.364403" cy="128.15633" r="1.3229166" fill="#faa" transform="translate(0 3.1750001)"></circle>
</g>
<g class="care-bear__cheek care-bear__cheek--right">
<circle r="1.3229166" cy="128.15633" cx="91.364403" transform="translate(17.991638 3.1750001)" fill="#faa"></circle>
</g>
<g class="care-bear__mouth">
<path d="M98.069425 133.1097a2.2359423 2.2359423 0 002.221095 2.00623 2.2359423 2.2359423 0 002.22459-2.00623z"></path>
<path d="M100.97006285 134.12669591a.76244812.72614104 0 00-.76274347.7260537.76244812.72614104 0 00.05167577.26199835 2.23594226 2.23594226 0 00.03152246.00105834 2.23594226 2.23594226 0 001.40094757-.49506187.76244812.72614104 0 00-.72140233-.4940247z" fill="red"></path>
</g>
</g>
</svg></span>
<div class="rain">
<svg>
<path> </path>
</svg>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script><script src="./script.js"></script>
</body>
</html>