donobu
Version:
Create browser automations with an LLM agent and replay them as Playwright scripts.
142 lines (129 loc) • 5.29 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Monkey Eyes Follow Mouse</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
svg {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0,512) scale(0.1,-0.1)"
fill="#000000"
stroke="none"
>
<!-- Monkey face and details here -->
<path
d="M2380 4484 c-99 -12 -311 -58 -392 -85 -203 -67 -453 -206 -604 -336
l-70 -61 -70 34 c-233 113 -494 74 -668 -101 -187 -189 -229 -489 -108 -758
41 -89 84 -151 155 -220 l60 -58 -27 -54 c-69 -141 -129 -351 -171 -602 -14
-80 -25 -156 -25 -167 0 -16 17 -4 75 54 41 41 76 72 78 69 3 -2 12 -41 21
-85 38 -190 144 -448 253 -614 267 -408 746 -741 1229 -855 583 -139 1216 3
1699 380 361 281 617 689 681 1082 l17 104 85 -83 c76 -76 83 -80 78 -53 -2
17 -8 55 -11 85 -21 171 -83 405 -161 603 l-55 138 33 27 c101 85 170 190 218
332 31 91 38 278 16 375 -29 120 -79 210 -166 296 -117 117 -242 169 -400 169
-94 0 -161 -15 -256 -60 l-80 -37 -40 34 c-123 106 -313 226 -461 292 -242
106 -452 152 -718 156 -99 2 -196 1 -215 -1z m-1376 -675 c23 -6 54 -20 69
-32 l26 -22 -51 -67 c-50 -67 -52 -68 -97 -68 -56 0 -120 -28 -149 -65 -33
-42 -29 -54 15 -44 21 4 39 6 41 4 3 -2 -1 -18 -7 -36 -26 -75 -2 -218 45
-271 17 -18 17 -22 -6 -88 -28 -79 -27 -79 -117 -3 -65 55 -128 175 -146 276
-13 80 1 183 34 250 65 130 209 200 343 166z m3324 -20 c62 -30 119 -90 151
-158 23 -50 26 -67 26 -166 -1 -97 -4 -118 -28 -175 -15 -36 -43 -86 -62 -112
-36 -50 -132 -131 -144 -123 -4 2 -16 31 -26 65 l-18 60 29 58 c33 64 44 169
26 236 l-11 38 45 -7 c24 -3 44 -2 44 2 0 15 -56 71 -90 88 -18 9 -55 19 -84
22 -49 6 -53 8 -104 76 -48 62 -52 71 -39 85 45 45 202 51 285 11z m-2443
-317 c28 -11 91 -39 140 -62 155 -72 343 -149 404 -165 159 -41 319 -3 656
154 172 81 230 96 365 95 95 0 125 -4 175 -24 136 -53 233 -143 299 -280 l41
-85 0 -130 c0 -149 -15 -200 -89 -308 -74 -108 -227 -201 -353 -214 -29 -3
-53 -8 -53 -10 0 -3 23 -30 50 -60 130 -142 197 -401 156 -603 -71 -347 -295
-578 -683 -704 -150 -48 -269 -66 -443 -66 -168 0 -298 18 -422 60 -320 107
-537 309 -641 596 -31 86 -32 94 -32 244 0 144 2 161 28 235 33 94 90 193 145
253 37 39 38 42 18 46 -108 21 -146 32 -207 63 -172 86 -279 263 -279 464 0
239 172 453 415 516 74 19 247 11 310 -15z"
/>
<path
d="M2780 2332 c-42 -6 -91 -52 -115 -106 -25 -55 -39 -126 -25 -126 4 0
32 11 62 25 37 17 70 25 111 25 51 0 62 4 88 29 37 37 37 72 2 111 -29 32 -78
49 -123 42z"
/>
<path
d="M2234 2296 c-37 -37 -42 -62 -19 -105 18 -35 32 -41 102 -41 38 0 74
-8 114 -26 33 -15 62 -25 65 -22 9 10 -17 103 -42 146 -33 57 -76 82 -137 82
-42 0 -54 -5 -83 -34z"
/>
<path
d="M1654 1624 c48 -33 181 -95 262 -122 335 -114 976 -104 1339 20 122
42 288 127 248 128 -6 0 -51 -10 -100 -22 -82 -21 -110 -22 -393 -22 -168 1
-379 1 -470 0 -703 -1 -731 -1 -814 22 -103 29 -119 28 -72 -4z"
/>
<!-- Left eye -->
<circle
cx="1922"
cy="2916"
r="215"
fill="black"
stroke="black"
stroke-width="2"
/>
<!-- Left pupil -->
<circle id="leftPupil" cx="1922" cy="2916" r="70" fill="white" />
<!-- Right eye -->
<circle
cx="3210"
cy="2916"
r="215"
fill="black"
stroke="black"
stroke-width="2"
/>
<!-- Right pupil -->
<circle id="rightPupil" cx="3210" cy="2916" r="70" fill="white" />
</g>
</svg>
<script>
const leftPupil = document.getElementById('leftPupil');
const rightPupil = document.getElementById('rightPupil');
document.addEventListener('mousemove', (e) => {
const svg = document.querySelector('svg');
const svgRect = svg.getBoundingClientRect();
const mouseX = e.clientX;
const mouseY = e.clientY;
// Move left pupil
movePupil(leftPupil, 1922, 2916, mouseX, mouseY, svgRect, 100); // Adjust max distance if needed
// Move right pupil
movePupil(rightPupil, 3210, 2916, mouseX, mouseY, svgRect, 100); // Adjust max distance if needed
});
function movePupil(pupil, cx, cy, mouseX, mouseY, svgRect, maxDist) {
const pupilCenterX = svgRect.left + (cx / 5120) * svgRect.width;
const pupilCenterY = svgRect.top + (cy / 5120) * svgRect.height;
const dx = mouseX - pupilCenterX;
const dy = mouseY - pupilCenterY;
const angle = Math.atan2(dy, dx);
const distance = Math.min(maxDist, Math.sqrt(dx * dx + dy * dy)); // Limit the movement
const pupilX = cx + Math.cos(angle) * distance;
const pupilY = cy - Math.sin(angle) * distance;
pupil.setAttribute('cx', pupilX);
pupil.setAttribute('cy', pupilY);
}
</script>
</body>
</html>