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
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="pattern-bg" x="0" y="0" width="0.2" height="0.2">
<path d="M28.1,23.8l12.4-6.1c0,0,0,0,0,0c0,0,0,0,0,0L12,41.7L12,41.6l45.3-26.9c0.1,0,0.1,0,0.1,0c0,0,0,0.1,0,0.1
L9.7,50.5l-0.2-0.3l56.6-34.1c0.1-0.1,0.3,0,0.3,0.1c0.1,0.1,0,0.2-0.1,0.3L5.8,59.9l-0.3-0.5l68.2-41.5c0.2-0.1,0.4-0.1,0.5,0.1
c0.1,0.2,0.1,0.4-0.1,0.5L5.9,66.3l-0.5-0.8l76.9-44.6c0.3-0.2,0.6-0.1,0.8,0.2c0.2,0.3,0.1,0.6-0.2,0.8L6,73.3l-0.7-1.1l83.2-47.8
c0.4-0.2,0.8-0.1,1.1,0.3c0.2,0.4,0.1,0.8-0.2,1L9,80.9l-0.9-1.4l83.5-48.8c0.4-0.2,1-0.1,1.2,0.3c0.2,0.4,0.1,0.9-0.3,1.2
L11.7,86.5l-1-1.6l84.8-48.8c0.5-0.3,1.1-0.1,1.4,0.4c0.3,0.5,0.1,1-0.3,1.3L16,93.2l-1.2-1.8l92.5-57.5c0.5-0.3,1.2-0.2,1.6,0.4
c0.3,0.5,0.2,1.2-0.3,1.5l-88,63.8l-1.4-2l119.4-80.7c0.6-0.4,1.4-0.2,1.8,0.3c0.4,0.6,0.2,1.3-0.3,1.7L24.9,105l-1.6-2.2
l130.2-87.5c0.6-0.4,1.5-0.3,1.9,0.4c0.4,0.6,0.3,1.4-0.3,1.9L28.6,111.1l-1.6-2.3l136.5-91.5c0.7-0.4,1.6-0.3,2,0.4
c0.4,0.6,0.3,1.5-0.3,2L32.9,117.5l-1.7-2.4l139.4-94.1c0.7-0.5,1.6-0.3,2.1,0.4c0.4,0.7,0.3,1.6-0.3,2L39,123.6l-1.8-2.5
l138.6-95.2c0.7-0.5,1.7-0.3,2.2,0.4c0.5,0.7,0.3,1.6-0.4,2.1L43,128.6l-1.8-2.5l139.7-95.1c0.7-0.5,1.7-0.3,2.1,0.4
c0.5,0.7,0.3,1.6-0.3,2.1L49,134.3l-1.8-2.4L187,35.7c0.7-0.5,1.6-0.3,2,0.4c0.4,0.6,0.3,1.5-0.3,2L55.6,139l-1.7-2.3l136-95.1
c0.6-0.4,1.5-0.3,2,0.3c0.4,0.6,0.3,1.5-0.3,1.9l-130,100.4L60,142l133.9-94.3c0.6-0.4,1.4-0.3,1.9,0.3c0.4,0.6,0.3,1.4-0.3,1.8
l-129,99.8l-1.5-2l129-90.3c0.5-0.4,1.2-0.2,1.6,0.3c0.4,0.5,0.2,1.2-0.2,1.6L72.2,155.3l-1.3-1.7l123.2-86.1
c0.4-0.3,1.1-0.2,1.4,0.2c0.3,0.4,0.2,1-0.2,1.3L77.4,161.8l-1.1-1.4l116-82.4c0.4-0.3,0.9-0.2,1.1,0.2c0.3,0.4,0.2,0.8-0.2,1.1
L82.8,166.4l-0.8-1.1l108.2-75.4c0.2-0.2,0.6-0.1,0.7,0.1c0.2,0.2,0.1,0.5-0.1,0.7L87.9,172.2l-0.5-0.6l87.8-60.5
c0.1-0.1,0.3-0.1,0.4,0.1c0.1,0.1,0.1,0.3-0.1,0.4L92,176.8l-0.2-0.3l49.6-30.8c0.1,0,0.1,0,0.2,0c0,0,0,0.1,0,0.1l-45.1,35
l-0.1-0.1l21.4-10.3c0,0,0,0,0,0c0,0,0,0,0,0l-17.5,15l17.5-15l0,0l-21.3,10.3c0,0-0.1,0-0.1,0c0,0,0,0,0-0.1l45-35.1l0.1,0.2
l-49.5,30.9c-0.1,0-0.2,0-0.2-0.1c0-0.1,0-0.2,0-0.2l83.5-65.5l0.3,0.5l-87.7,60.7c-0.2,0.1-0.4,0.1-0.5-0.1
c-0.1-0.2-0.1-0.4,0.1-0.5l102.7-81.7l0.6,0.8l-108,75.6c-0.3,0.2-0.7,0.1-0.9-0.2c-0.2-0.3-0.1-0.7,0.1-0.9l110.4-87.4l1,1.3
L77.3,161.8c-0.4,0.3-1,0.2-1.2-0.2c-0.3-0.4-0.2-0.9,0.2-1.2l117.8-92.9l1.2,1.6l-123,86.3c-0.5,0.3-1.1,0.2-1.5-0.3
c-0.3-0.5-0.2-1.1,0.2-1.5l123-96.3l1.4,1.9L66.5,149.7c-0.6,0.4-1.3,0.3-1.7-0.3c-0.4-0.5-0.3-1.3,0.3-1.7l128.8-100l1.6,2.2
L61.5,144.3c-0.6,0.4-1.5,0.3-1.9-0.3c-0.4-0.6-0.3-1.4,0.3-1.9L189.9,41.6l1.7,2.3l-136,95.2c-0.6,0.5-1.5,0.3-2-0.4
c-0.4-0.6-0.3-1.5,0.3-2l133.1-101l1.7,2.4L49,134.4c-0.7,0.5-1.6,0.3-2.1-0.4c-0.5-0.7-0.3-1.6,0.3-2L180.8,31l1.8,2.5L42.9,128.6
c-0.7,0.5-1.7,0.3-2.2-0.4c-0.5-0.7-0.3-1.6,0.4-2.1L175.8,25.9l1.8,2.5L39,123.6c-0.7,0.5-1.7,0.3-2.1-0.4
c-0.5-0.7-0.3-1.6,0.3-2.1L170.6,21l1.7,2.4L32.8,117.5c-0.7,0.5-1.6,0.3-2-0.4c-0.4-0.7-0.3-1.5,0.3-2l132.3-97.8l1.7,2.3
L28.6,111.1c-0.6,0.4-1.5,0.3-1.9-0.4c-0.4-0.6-0.3-1.5,0.3-1.9l126.5-93.6l1.6,2.2L24.9,105c-0.6,0.4-1.5,0.3-1.9-0.4
c-0.4-0.6-0.3-1.4,0.3-1.8l115.2-85.9L140,19L20.6,99.6c-0.5,0.4-1.3,0.2-1.7-0.3c-0.4-0.5-0.2-1.3,0.3-1.6l88.1-63.7l1.3,1.9
L16,93.2c-0.5,0.3-1.2,0.2-1.5-0.3c-0.3-0.5-0.2-1.1,0.3-1.4l80.7-55.3l1.1,1.7L11.7,86.5c-0.5,0.3-1,0.1-1.3-0.4
c-0.2-0.4-0.1-1,0.3-1.3l81-54.3l0.9,1.5L9,80.9c-0.4,0.2-0.9,0.1-1.1-0.3c-0.2-0.4-0.1-0.9,0.3-1.1l80.4-55l0.8,1.3L6,73.4
c-0.3,0.2-0.7,0.1-0.9-0.2c-0.2-0.3-0.1-0.7,0.2-0.9l77-51.3l0.6,1l-77,44.5c-0.2,0.1-0.5,0.1-0.7-0.2c-0.1-0.2-0.1-0.5,0.1-0.6
l68.3-47.6l0.4,0.7L5.8,59.9c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.1,0-0.3,0.1-0.4l60.7-43.2l0.3,0.4L9.7,50.5c-0.1,0-0.2,0-0.2-0.1
c0-0.1,0-0.2,0-0.2l47.7-35.5l0.1,0.2L12,41.7c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1l28.5-24l0,0L28.1,23.8z" fill=#E01279" />
</pattern>
<mask id="mask">
<circle cx="122.9" cy="122.9" r="93.7" fill="#ffffff" />
</mask>
<style>
.bg {
fill: url(#pattern-bg);
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const magnifier = document.querySelector('.magnifier');
const mask = document.querySelector('#mask circle');
window.addEventListener('mousemove', (e) => {
magnifier.style.transform = `translate(${e.clientX-120}px, ${e.clientY-120}px)`;
mask.style.transform = `translate(${e.clientX-120}px, ${e.clientY-120}px)`;
})
});
</script>
</defs>
<g>
<path class="magnifier" d="M122.9,19.9c28.5,0,54.2,11.5,72.9,30.2c18.6,18.6,30.2,44.4,30.2,72.9c0,26.8-10.2,51.2-26.9,69.5l39,39
c1.8,1.8,1.8,4.8,0,6.6c-1.8,1.8-4.8,1.8-6.6,0l-39-39c-18.3,16.7-42.7,26.9-69.5,26.9c-28.5,0-54.2-11.5-72.9-30.2
s-30.2-44.4-30.2-72.9c0-28.5,11.5-54.2,30.2-72.9S94.4,19.9,122.9,19.9L122.9,19.9z M189.1,56.7c-17-17-40.4-27.4-66.2-27.4
S73.6,39.7,56.7,56.7c-17,17-27.4,40.4-27.4,66.2s10.5,49.3,27.4,66.2c17,17,40.4,27.4,66.2,27.4s49.3-10.5,66.2-27.4
c17-17,27.4-40.4,27.4-66.2S206.1,73.6,189.1,56.7z" fill="#011627" />
</g>
<g mask="url(#mask)">
<rect class="bg" x="0" y="0" width="100vw" height="100vh"></rect>
</g>
</svg>
|
