In this tutorial, we’ll explore how to implement a sticky/stretching cursor effect using HTML, CSS, and JavaScript. This effect can add a visually engaging interaction to your website or web application.
Overview
The sticky/stretching cursor effect involves the cursor stretching or deforming when hovering over specific elements on the webpage. We’ll achieve this by using SVG graphics and manipulating their attributes dynamically.
HTML Structure
Let’s start by defining the HTML structure. We’ll have a main element containing buttons with SVG icons. Additionally, we’ll include a div element for the cursor itself.
<main>
<div>
<button class="btn menu-btn" data-hover>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" x2="20" y1="12" y2="12" />
<line x1="4" x2="20" y1="6" y2="6" />
<line x1="4" x2="20" y1="18" y2="18" />
</svg>
<div data-hover-bounds></div>
</button>
<button class="btn close-btn" data-hover>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x">
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
<div data-hover-bounds></div>
</button>
</div>
</main>
<div class="cursor"></div>
<svg class="cta" viewBox="0 0 52 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3417 42.0204C12.2328 42.0204 12.1486 41.9882 12.0891 41.9238C12.0297 41.8644 12 41.7133 12 41.4706C12 41.2478 12.0396 40.958 12.1189 40.6014C12.1981 40.2399 12.3046 39.8387 12.4383 39.3979C12.572 38.9572 12.7231 38.5015 12.8915 38.031C13.0599 37.5556 13.2357 37.09 13.4189 36.6344C13.6071 36.1738 13.7879 35.7528 13.9612 35.3714C14.0256 35.2328 14.0925 35.1362 14.1618 35.0817C14.2312 35.0272 14.3129 35 14.407 35C14.4714 35 14.5258 35.0198 14.5704 35.0594C14.6199 35.0941 14.6447 35.1535 14.6447 35.2377C14.6447 35.2674 14.6125 35.364 14.5481 35.5275C14.4887 35.6909 14.4045 35.9063 14.2955 36.1738C14.1915 36.4412 14.0752 36.7409 13.9464 37.0727C13.8176 37.4045 13.6864 37.7537 13.5527 38.1202C13.4189 38.4867 13.2926 38.8556 13.1738 39.2271C13.0549 39.5936 12.9534 39.9452 12.8692 40.282C12.785 40.6188 12.728 40.9209 12.6983 41.1883C12.8172 41.0447 12.9534 40.8614 13.1069 40.6386C13.2604 40.4157 13.4239 40.1755 13.5972 39.918C13.7706 39.6604 13.9464 39.4054 14.1247 39.1528C14.303 38.9002 14.4788 38.6699 14.6521 38.4619C14.8255 38.2539 14.9864 38.088 15.135 37.9642C15.2886 37.8354 15.4223 37.771 15.5362 37.771C15.7244 37.771 15.8754 37.8304 15.9893 37.9493C16.1082 38.0632 16.1676 38.2514 16.1676 38.5139C16.1676 38.6625 16.1379 38.8408 16.0785 39.0488C16.024 39.2568 15.9596 39.4747 15.8853 39.7025C15.8111 39.9304 15.7442 40.1483 15.6848 40.3563C15.6303 40.5643 15.603 40.7426 15.603 40.8912C15.603 41.0942 15.6798 41.1958 15.8333 41.1958C16.0711 41.1958 16.3088 41.1437 16.5465 41.0397C16.7892 40.9357 17.0195 40.807 17.2374 40.6534C17.4553 40.495 17.6559 40.3365 17.8392 40.178C18.0224 40.0145 18.1784 39.8759 18.3072 39.762C18.4459 39.6381 18.5622 39.5762 18.6563 39.5762C18.7752 39.5762 18.8346 39.6381 18.8346 39.762C18.8346 39.7966 18.8272 39.8363 18.8124 39.8808C18.7975 39.9254 18.7579 39.9824 18.6935 40.0517C18.6142 40.1408 18.5003 40.2572 18.3518 40.4009C18.2081 40.5445 18.0397 40.698 17.8466 40.8614C17.6584 41.0249 17.4529 41.1784 17.23 41.322C17.0121 41.4657 16.7867 41.5845 16.554 41.6786C16.3261 41.7678 16.1033 41.8124 15.8853 41.8124C15.5882 41.8124 15.3579 41.7282 15.1945 41.5598C15.036 41.3864 14.9567 41.1487 14.9567 40.8466C14.9567 40.6584 14.9864 40.4306 15.0459 40.1631C15.1053 39.8957 15.1796 39.6134 15.2687 39.3162C15.3628 39.0141 15.4569 38.7194 15.551 38.4322C15.3926 38.5411 15.2192 38.7046 15.031 38.9225C14.8478 39.1355 14.6546 39.3781 14.4516 39.6505C14.2485 39.918 14.0454 40.1904 13.8424 40.4677C13.6443 40.7451 13.4511 41.0026 13.2629 41.2403C13.0797 41.4731 12.9088 41.6613 12.7503 41.8049C12.5918 41.9486 12.4556 42.0204 12.3417 42.0204Z" fill="black" />
<path d="M19.4407 41.7604C19.1485 41.7604 18.9182 41.6489 18.7498 41.426C18.5815 41.2032 18.4973 40.9134 18.4973 40.5569C18.4973 40.4281 18.5146 40.2919 18.5493 40.1483C18.5889 39.9997 18.6384 39.866 18.6978 39.7471C18.6632 39.7124 18.6359 39.6654 18.6161 39.606C18.5963 39.5416 18.5864 39.4623 18.5864 39.3682C18.5864 39.076 18.6359 38.8086 18.735 38.5659C18.834 38.3232 18.9653 38.1127 19.1287 37.9344C19.2922 37.7512 19.4729 37.61 19.671 37.511C19.8741 37.4119 20.0796 37.3624 20.2876 37.3624C20.6294 37.3624 20.9067 37.4862 21.1197 37.7339C21.3326 37.9765 21.4391 38.348 21.4391 38.8482C21.4391 39.1107 21.3995 39.3781 21.3203 39.6505C21.246 39.9229 21.142 40.1854 21.0082 40.438C20.8795 40.6906 20.7284 40.9159 20.5551 41.114C20.3867 41.3121 20.2059 41.4706 20.0128 41.5895C19.8246 41.7034 19.6339 41.7604 19.4407 41.7604ZM19.1882 39.4945C19.2179 39.5341 19.2327 39.5861 19.2327 39.6505C19.2327 39.7248 19.2179 39.7991 19.1882 39.8734C19.1634 39.9477 19.1362 40.0492 19.1064 40.178C19.0767 40.3068 19.0619 40.49 19.0619 40.7277C19.0619 40.9655 19.156 41.0843 19.3442 41.0843C19.5522 41.0843 19.7453 41.0026 19.9236 40.8392C20.1019 40.6708 20.2604 40.4553 20.3991 40.1928C20.5377 39.9304 20.6442 39.6505 20.7185 39.3534C20.7978 39.0513 20.8374 38.7665 20.8374 38.499C20.8374 38.3257 20.8052 38.2044 20.7408 38.135C20.6764 38.0607 20.56 38.0236 20.3916 38.0236C20.2183 38.0236 20.0375 38.083 19.8493 38.2019C19.6661 38.3158 19.5126 38.4718 19.3887 38.6699C19.2649 38.868 19.203 39.0909 19.203 39.3385C19.203 39.393 19.1981 39.445 19.1882 39.4945Z" fill="black" />
<path d="M23.1621 41.5003C23.0878 41.5003 23.0135 41.4459 22.9393 41.3369C22.8699 41.2279 22.8179 41.0744 22.7832 40.8763C22.7486 40.6683 22.7164 40.4306 22.6867 40.1631C22.657 39.8957 22.6322 39.6332 22.6124 39.3757C22.5926 39.1181 22.5777 38.8903 22.5678 38.6922C22.5579 38.4941 22.5529 38.3604 22.5529 38.291C22.5529 38.0335 22.5926 37.8428 22.6718 37.719C22.756 37.5902 22.8625 37.5258 22.9913 37.5258C23.0804 37.5258 23.1448 37.5506 23.1844 37.6001C23.224 37.6447 23.2438 37.7487 23.2438 37.9122C23.2438 38.0211 23.2463 38.1623 23.2513 38.3356C23.2562 38.5089 23.2637 38.6971 23.2736 38.9002C23.2835 39.1429 23.2934 39.4004 23.3033 39.6728C23.3132 39.9403 23.3206 40.2052 23.3256 40.4677C23.4444 40.2696 23.5806 40.0492 23.7342 39.8065C23.8926 39.5639 24.0536 39.3162 24.217 39.0636C24.3805 38.8061 24.539 38.5609 24.6925 38.3282C24.846 38.0954 24.9822 37.8923 25.1011 37.719C25.2199 37.5457 25.3116 37.4194 25.376 37.3401C25.4601 37.2411 25.5369 37.1717 25.6063 37.1321C25.6805 37.0925 25.7449 37.0727 25.7994 37.0727C25.8737 37.0727 25.9331 37.0999 25.9777 37.1544C26.0272 37.2089 26.052 37.2856 26.052 37.3847C26.052 37.4441 26.0396 37.511 26.0148 37.5853C25.995 37.6546 25.9579 37.7264 25.9034 37.8007C25.7697 38.0038 25.6087 38.2415 25.4205 38.5139C25.2323 38.7863 25.0367 39.0686 24.8336 39.3608C24.6306 39.653 24.4325 39.9378 24.2393 40.2151C24.0462 40.4875 23.8778 40.7277 23.7342 40.9357C23.4816 41.3121 23.2909 41.5003 23.1621 41.5003Z" fill="black" />
<path d="M29.4161 38.3653C29.4161 38.6823 29.2651 38.9893 28.963 39.2865C28.6609 39.5837 28.2003 39.8561 27.5812 40.1037C27.5614 40.2275 27.5515 40.3315 27.5515 40.4157C27.5515 40.6138 27.5762 40.7574 27.6258 40.8466C27.6802 40.9357 27.7694 40.9803 27.8932 40.9803C28.0765 40.9803 28.282 40.9234 28.5098 40.8094C28.7376 40.6906 28.9729 40.5395 29.2156 40.3563C29.4582 40.1681 29.696 39.97 29.9287 39.762C30.1665 39.554 30.3844 39.3583 30.5825 39.1751C30.7806 38.9869 30.949 38.8358 31.0877 38.7219C31.2263 38.603 31.3204 38.5436 31.37 38.5436C31.4393 38.5436 31.4963 38.5758 31.5408 38.6402C31.5854 38.6996 31.6077 38.7813 31.6077 38.8853C31.6077 39.0141 31.6003 39.1627 31.5854 39.3311C31.5705 39.4945 31.5532 39.6679 31.5334 39.8511C31.6622 39.4896 31.8231 39.1751 32.0163 38.9076C32.2144 38.6352 32.4249 38.4099 32.6477 38.2316C32.8706 38.0533 33.0885 37.9196 33.3015 37.8304C33.5145 37.7413 33.6977 37.6967 33.8512 37.6967C33.9949 37.6967 34.1013 37.724 34.1707 37.7784C34.24 37.8329 34.2747 37.8973 34.2747 37.9716C34.2747 38.0409 34.2425 38.1053 34.1781 38.1647C34.1187 38.2192 33.98 38.291 33.7621 38.3802C33.5095 38.4792 33.2718 38.5956 33.0489 38.7293C32.831 38.8631 32.6279 39.0463 32.4397 39.2791C32.2515 39.5069 32.0831 39.8115 31.9346 40.1928C31.786 40.5742 31.6597 41.0645 31.5557 41.6638C31.5359 41.7826 31.5012 41.8668 31.4517 41.9164C31.4022 41.9708 31.3427 41.9981 31.2734 41.9981C31.2239 41.9981 31.1743 41.9758 31.1248 41.9312C31.0753 41.8916 31.0357 41.795 31.0059 41.6415C30.9762 41.483 30.9614 41.2354 30.9614 40.8986C30.9614 40.6708 30.9713 40.4231 30.9911 40.1557C31.0158 39.8883 31.0505 39.6084 31.0951 39.3162C30.8673 39.5639 30.6147 39.8239 30.3373 40.0963C30.06 40.3637 29.7727 40.6138 29.4756 40.8466C29.1784 41.0744 28.8862 41.2601 28.599 41.4038C28.3117 41.5474 28.0443 41.6192 27.7966 41.6192C27.5341 41.6192 27.3237 41.5276 27.1652 41.3443C27.0067 41.1611 26.9274 40.8887 26.9274 40.5271C26.9274 40.1111 26.9819 39.7298 27.0909 39.3831C27.1998 39.0364 27.341 38.7368 27.5143 38.4842C27.6877 38.2266 27.8734 38.0285 28.0715 37.8899C28.2696 37.7512 28.4603 37.6819 28.6435 37.6819C28.8912 37.6819 29.0818 37.7462 29.2156 37.875C29.3493 37.9988 29.4161 38.1623 29.4161 38.3653ZM27.7001 39.5614C27.8486 39.4574 28.0096 39.341 28.1829 39.2122C28.3612 39.0834 28.5123 38.9522 28.6361 38.8185C28.7649 38.6798 28.8293 38.5535 28.8293 38.4396C28.8293 38.3703 28.8119 38.3207 28.7773 38.291C28.7426 38.2613 28.6832 38.2465 28.599 38.2465C28.4652 38.2465 28.3414 38.3133 28.2275 38.447C28.1136 38.5758 28.0121 38.7417 27.9229 38.9448C27.8338 39.1429 27.7595 39.3484 27.7001 39.5614Z" fill="black" />
<path d="M43.6212 41.4632C43.6162 41.5424 43.584 41.6068 43.5246 41.6563C43.4652 41.7059 43.3958 41.7306 43.3166 41.7306C43.2274 41.7306 43.1532 41.7009 43.0937 41.6415C43.0343 41.5821 43.0046 41.4904 43.0046 41.3666C43.0046 41.0447 43.0194 40.6955 43.0492 40.3191C43.0789 39.9378 43.116 39.5614 43.1606 39.1899C43.2052 38.8135 43.2497 38.4668 43.2943 38.1499C43.1309 38.3827 42.9526 38.6402 42.7594 38.9225C42.5712 39.2048 42.3781 39.4846 42.18 39.762C41.9819 40.0393 41.7887 40.2944 41.6005 40.5271C41.4123 40.755 41.2414 40.9407 41.0879 41.0843C40.9344 41.223 40.8081 41.2923 40.709 41.2923C40.5258 41.2923 40.3673 41.2205 40.2336 41.0769C40.0999 40.9283 40.033 40.7426 40.033 40.5197C40.033 40.4306 40.0429 40.3092 40.0627 40.1557C40.0825 39.9972 40.1048 39.8313 40.1296 39.658C40.1543 39.4846 40.1766 39.3237 40.1964 39.1751C40.2162 39.0215 40.2261 38.9076 40.2261 38.8333C40.2261 38.764 40.2187 38.7046 40.2039 38.655C40.194 38.6006 40.1692 38.5733 40.1296 38.5733C40.0701 38.5733 39.9884 38.6402 39.8844 38.7739C39.7804 38.9027 39.664 39.0686 39.5353 39.2717C39.4114 39.4747 39.2827 39.6901 39.1489 39.918C39.0202 40.1458 38.8988 40.3612 38.7849 40.5643C38.671 40.7624 38.5744 40.9184 38.4952 41.0323C38.4308 41.1413 38.3714 41.2205 38.3169 41.27C38.2624 41.3196 38.1956 41.3443 38.1163 41.3443C38.0222 41.3443 37.9356 41.2948 37.8563 41.1958C37.782 41.0967 37.7449 40.9754 37.7449 40.8317C37.7449 40.7475 37.7597 40.6163 37.7895 40.438C37.8192 40.2547 37.8563 40.0542 37.9009 39.8363C37.9504 39.6183 37.9975 39.4054 38.042 39.1974C38.0916 38.9844 38.1337 38.8036 38.1683 38.655C38.2079 38.4867 38.2575 38.3727 38.3169 38.3133C38.3763 38.2539 38.4407 38.2242 38.5101 38.2242C38.6042 38.2242 38.6784 38.2588 38.7329 38.3282C38.7924 38.3926 38.8221 38.4941 38.8221 38.6328C38.8221 38.6575 38.8072 38.7244 38.7775 38.8333C38.7478 38.9373 38.7106 39.0661 38.6661 39.2196C38.6264 39.3682 38.5819 39.5242 38.5323 39.6877C38.4878 39.8511 38.4506 40.0022 38.4209 40.1408C38.5299 39.9576 38.6438 39.7595 38.7626 39.5465C38.8865 39.3336 39.0103 39.1231 39.1341 38.9151C39.2579 38.7021 39.3817 38.5089 39.5055 38.3356C39.6294 38.1573 39.7507 38.0162 39.8696 37.9122C39.9884 37.8081 40.1023 37.7561 40.2113 37.7561C40.3401 37.7561 40.4589 37.7958 40.5679 37.875C40.6818 37.9542 40.7734 38.0607 40.8428 38.1945C40.9121 38.3282 40.9468 38.4768 40.9468 38.6402C40.9468 38.7541 40.9269 38.9151 40.8873 39.1231C40.8477 39.3261 40.8056 39.5465 40.761 39.7842C40.7214 40.022 40.6966 40.2473 40.6867 40.4603C40.6867 40.5098 40.7016 40.5346 40.7313 40.5346C40.7561 40.5346 40.7858 40.5172 40.8205 40.4826C40.9641 40.3241 41.1226 40.1334 41.2959 39.9105C41.4693 39.6827 41.6451 39.4425 41.8234 39.1899C42.0066 38.9373 42.1874 38.6897 42.3657 38.447C42.544 38.1994 42.7099 37.9765 42.8634 37.7784C43.0219 37.5754 43.1606 37.4144 43.2794 37.2955C43.4033 37.1767 43.4998 37.1173 43.5692 37.1173C43.7178 37.1173 43.8317 37.1594 43.9109 37.2435C43.9902 37.3277 44.0298 37.4689 44.0298 37.667C44.0298 37.8255 44.0174 38.031 43.9926 38.2836C43.9728 38.5362 43.9456 38.8111 43.9109 39.1082C43.8812 39.4054 43.8465 39.705 43.8069 40.0071C43.7722 40.3043 43.7376 40.5816 43.7029 40.8392C43.6682 41.0917 43.641 41.2998 43.6212 41.4632Z" fill="black" />
<path d="M48.0836 38.4842C48.0836 38.6427 48.0341 38.7987 47.935 38.9522C47.836 39.1008 47.7047 39.2444 47.5413 39.3831C47.3779 39.5168 47.1971 39.6431 46.999 39.762C46.8009 39.8808 46.6028 39.9848 46.4047 40.074C46.2066 40.1631 46.0258 40.2349 45.8623 40.2894C45.8227 40.4826 45.8029 40.6534 45.8029 40.802C45.8029 40.8961 45.8252 40.963 45.8698 41.0026C45.9144 41.0422 45.9837 41.062 46.0778 41.062C46.2858 41.062 46.5062 41.0249 46.739 40.9506C46.9717 40.8763 47.2095 40.7797 47.4521 40.6609C47.6948 40.542 47.9276 40.4157 48.1505 40.282C48.3733 40.1483 48.5764 40.022 48.7596 39.9031C48.9478 39.7842 49.1038 39.6877 49.2277 39.6134C49.3515 39.5391 49.4332 39.5019 49.4728 39.5019C49.5323 39.5019 49.5768 39.5218 49.6065 39.5614C49.6412 39.596 49.6585 39.6381 49.6585 39.6877C49.6585 39.7273 49.5966 39.8041 49.4728 39.918C49.354 40.0319 49.193 40.1656 48.9899 40.3191C48.7869 40.4677 48.5591 40.6212 48.3065 40.7797C48.0539 40.9382 47.7914 41.0868 47.519 41.2255C47.2516 41.3641 46.9915 41.4756 46.739 41.5598C46.4913 41.644 46.2685 41.6861 46.0704 41.6861C45.8128 41.6861 45.6122 41.5895 45.4686 41.3963C45.325 41.2032 45.2532 40.9035 45.2532 40.4974C45.2532 40.225 45.2878 39.9502 45.3572 39.6728C45.4315 39.3955 45.5305 39.1305 45.6543 38.8779C45.7831 38.6204 45.9243 38.3926 46.0778 38.1945C46.2363 37.9914 46.4022 37.8329 46.5755 37.719C46.7489 37.6001 46.9173 37.5407 47.0807 37.5407C47.3927 37.5407 47.6379 37.6274 47.8162 37.8007C47.9945 37.9741 48.0836 38.2019 48.0836 38.4842ZM46.0184 39.7174C46.1719 39.6233 46.3304 39.5242 46.4938 39.4202C46.6572 39.3162 46.8083 39.2097 46.947 39.1008C47.0856 38.9918 47.1971 38.8779 47.2813 38.7591C47.3704 38.6352 47.415 38.5089 47.415 38.3802C47.415 38.1969 47.3159 38.1053 47.1178 38.1053C46.994 38.1053 46.8628 38.1845 46.7241 38.343C46.5904 38.4966 46.4616 38.6971 46.3378 38.9448C46.214 39.1924 46.1075 39.4499 46.0184 39.7174Z" fill="black" />
<path d="M50.3136 39.8511C50.2691 39.8511 50.2294 39.8288 50.1948 39.7842C50.165 39.7347 50.1502 39.6703 50.1502 39.5911C50.1502 39.4821 50.17 39.3113 50.2096 39.0785C50.2542 38.8408 50.3112 38.5659 50.3805 38.2539C50.4548 37.9369 50.539 37.6076 50.6331 37.2658C50.7321 36.9241 50.8361 36.5898 50.9451 36.2629C51.054 35.9311 51.163 35.6364 51.272 35.3789C51.3463 35.2055 51.4379 35.1189 51.5468 35.1189C51.6607 35.1189 51.7647 35.1733 51.8588 35.2823C51.953 35.3913 52 35.525 52 35.6835C52 35.7429 51.9703 35.8543 51.9109 36.0178C51.8564 36.1812 51.7821 36.3793 51.688 36.6121C51.5988 36.8449 51.4998 37.095 51.3908 37.3624C51.2819 37.6299 51.1704 37.9022 51.0565 38.1796C50.9476 38.452 50.846 38.7095 50.7519 38.9522C50.6578 39.1949 50.5835 39.4054 50.5291 39.5837C50.4944 39.6926 50.4622 39.7644 50.4325 39.7991C50.4028 39.8338 50.3632 39.8511 50.3136 39.8511ZM49.8753 42.0649C49.801 42.0649 49.7243 42.0228 49.645 41.9386C49.5658 41.8545 49.5262 41.6836 49.5262 41.426C49.5262 41.2824 49.5732 41.1759 49.6673 41.1066C49.7614 41.0323 49.8827 40.9952 50.0313 40.9952C50.2839 40.9952 50.4102 41.1264 50.4102 41.3889C50.4102 41.5127 50.3805 41.6242 50.3211 41.7232C50.2616 41.8272 50.1898 41.9089 50.1056 41.9684C50.0264 42.0327 49.9496 42.0649 49.8753 42.0649Z" fill="black" />
<path d="M26.7476 8.71032C27.2887 7.78829 27.7547 6.82747 28.2229 5.86777C28.5794 5.09191 28.9154 4.30706 29.2465 3.52052C29.3747 3.18882 29.5227 2.86386 29.6272 2.52372C29.7147 2.22462 29.7418 1.91034 29.7311 1.6C29.5181 1.82826 29.3408 2.08912 29.2013 2.36798C29.0725 2.65865 28.9663 2.95943 28.846 3.25403C28.5506 3.96523 28.2433 4.67138 27.9287 5.37414C26.9035 7.59377 25.8568 9.46594 24.4051 11.3904C24.2515 11.595 24.0945 11.7974 23.9357 11.9982C22.9998 11.0143 21.9379 10.1473 20.7923 9.41984C19.6683 8.71032 18.4844 8.0857 17.2417 7.60838C16.2662 7.24913 15.2546 6.9832 14.2271 6.8196C13.1025 6.65206 11.9553 6.66836 10.825 6.77125C10.0201 6.85614 9.218 6.99951 8.44473 7.2407C7.82791 7.43859 7.23764 7.71071 6.66319 8.00812C6.20227 8.24875 5.75096 8.51186 5.33523 8.82445C4.88278 9.16572 4.46931 9.55365 4.05584 9.93932C3.56612 10.3953 3.09786 10.8748 2.67591 11.3938C2.27826 11.8705 1.89473 12.3715 1.6445 12.9427C1.47335 13.3379 1.36038 13.7551 1.25645 14.1717C1.07908 14.8784 0.962724 15.6014 0.944649 16.3306C0.898331 17.2852 0.99605 18.2528 1.33948 19.1501C1.69985 20.1126 2.2568 21.0183 3.03177 21.7042C3.80505 22.3659 4.73084 22.8489 5.70746 23.1373C6.42934 23.3526 7.18342 23.5078 7.94088 23.4561C8.38203 23.4246 8.81527 23.3285 9.24455 23.2273C9.73654 23.1148 10.224 22.9844 10.703 22.8247C11.8321 22.4486 12.9325 21.9808 13.9769 21.4102C14.7688 20.9778 15.5166 20.4707 16.2543 19.9529C17.9297 18.7835 19.4949 17.4623 20.9409 16.0219C21.6136 15.3141 22.2898 14.6096 22.9608 13.9007C23.2884 13.5296 23.6098 13.1529 23.9233 12.7706C24.2374 13.1237 24.5853 13.542 24.8423 13.9102C25.4207 14.7395 25.8771 15.5137 26.2584 16.2755C27.0808 17.8733 27.6846 19.5813 27.9456 21.1808C28.3342 23.2503 28.4551 25.3558 28.5997 27.4523C28.6867 28.819 28.7307 30.1886 28.8708 31.5508C28.8996 31.7898 28.9081 32.0321 28.9708 32.2654C29.0403 32.506 29.1504 32.7427 29.3142 32.9328C29.4249 32.5656 29.4735 32.1783 29.4086 31.7977C29.247 30.3764 29.2035 28.9461 29.1194 27.5186C28.955 25.0129 28.8194 22.4874 28.2438 20.0344C27.8117 18.1904 27.0209 16.4458 26.0613 14.8165C25.5484 13.9361 24.9423 13.1113 24.2622 12.3512C24.387 12.1944 24.5107 12.0369 24.6322 11.8773C25.4015 10.8659 26.1121 9.80889 26.7487 8.70976L26.7476 8.71032ZM22.8072 13.357C22.2192 14.0232 21.5865 14.6496 20.9793 15.2995C19.6192 16.7371 18.085 18.0538 16.3701 19.2979C15.5308 19.8978 14.6824 20.4904 13.7797 20.9936C13.1838 21.3292 12.1965 21.7886 11.3678 22.0995C10.642 22.3783 9.89865 22.6128 9.14006 22.7848C8.7633 22.8764 8.0578 23.0361 7.48166 23.0097C6.13731 22.9304 4.4326 22.3502 3.29442 21.332C2.35056 20.4955 1.63546 19.0742 1.45358 17.8008C1.30672 16.5971 1.3858 15.6031 1.66766 14.3808C1.80322 13.8315 1.87157 13.5381 2.11615 12.9983C2.546 12.1016 3.66497 10.921 4.36594 10.2682C4.85115 9.81845 5.33692 9.36362 5.88765 8.99256C6.66545 8.47813 7.3348 8.15148 8.27132 7.78829C9.56708 7.29748 11.4802 7.13556 12.7557 7.17492C13.5843 7.19178 14.4067 7.31603 15.2111 7.51C16.4679 7.78885 17.7602 8.30216 19.0255 8.98075C20.5602 9.78415 22.0734 10.8377 23.3878 12.1972C23.4494 12.2601 23.5211 12.3349 23.5985 12.4176C23.3393 12.7352 23.0749 13.0484 22.806 13.3576L22.8072 13.357Z" fill="black" />
<path d="M29.506 33.066C29.879 32.6465 30.3045 32.1111 30.5509 31.8313C30.7638 31.5838 30.9743 31.334 31.1843 31.0841C31.2588 30.9835 31.3634 30.9017 31.4137 30.7858C31.5091 30.473 31.1095 30.3443 30.9812 30.5752C30.9793 30.5777 30.9778 30.5803 30.9759 30.5828C30.8583 30.7235 30.7391 30.8628 30.6219 31.0036C30.2399 31.4545 29.7491 32.0302 29.2667 32.6101C29.2597 32.6052 29.2526 32.6003 29.2455 32.5954C29.1034 32.4943 28.9709 32.3796 28.8387 32.2654C28.4585 31.943 27.8237 31.2962 27.3138 30.8149C27.1028 30.6175 27.0344 30.5598 26.9219 30.4655C26.8802 30.4371 26.8416 30.4022 26.7995 30.3746C26.7698 30.35 26.7335 30.3339 26.6949 30.3314C26.5963 30.3222 26.5025 30.4056 26.4968 30.5062C26.496 30.5572 26.508 30.6067 26.5429 30.6449C26.542 30.6444 26.5409 30.6421 26.5389 30.6389C26.5517 30.6566 26.5658 30.6735 26.579 30.6912C26.6489 30.7853 26.7272 30.872 26.8063 30.9579C27.1332 31.3048 27.4732 31.6387 27.8131 31.9727C28.0961 32.2529 28.3899 32.5213 28.6927 32.7793C28.9151 32.9491 29.2179 33.2859 29.5056 33.0655L29.506 33.066Z" fill="black" />
<path d="M29.5589 1.45977C29.0367 1.66598 28.4155 1.95187 28.0694 2.09052C27.7677 2.21537 27.4672 2.34344 27.167 2.47174C27.0552 2.52792 26.925 2.55373 26.8278 2.63451C26.6016 2.87069 26.9002 3.16577 27.1188 3.01757C27.1217 3.01616 27.1241 3.01454 27.127 3.01314C27.2954 2.94056 27.4646 2.87001 27.6327 2.79722C28.177 2.56713 28.8747 2.27457 29.5668 1.97456C29.5709 1.98212 29.575 1.98968 29.5791 1.99724C29.6603 2.15158 29.7269 2.31369 29.7933 2.47519C29.9873 2.9345 30.2621 3.79806 30.5002 4.45755C30.5995 4.7289 30.6345 4.81125 30.6925 4.94616C30.7168 4.99033 30.7355 5.03888 30.7606 5.08251C30.7761 5.11783 30.8012 5.14862 30.8345 5.16827C30.9184 5.2209 31.0397 5.18881 31.0902 5.10155C31.1139 5.05644 31.1255 5.00683 31.1116 4.95699C31.1121 4.95782 31.1121 4.96038 31.1124 4.96415C31.109 4.94262 31.104 4.92118 31.1002 4.89942C31.0803 4.78387 31.0496 4.67119 31.0176 4.55883C30.8823 4.10181 30.7295 3.65041 30.5767 3.19901C30.4505 2.82134 30.3093 2.44924 30.1554 2.08247C30.0335 1.83062 29.9152 1.39343 29.559 1.46037L29.5589 1.45977Z" fill="black" />
</svg>In this structure, the main element contains buttons with SVG icons for demonstration purposes. You can replace these buttons with any elements you want to trigger the cursor effect on.
CSS Styling
Next, let’s define the CSS styles to customize the appearance of the cursor and the SVG icons.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
:root {
--cursor-size: 24px;
--background: #f2f2f2;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
display: block;
}
ul {
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: var(--background);
font-family: "Inter";
display: grid;
place-content: center;
}
button {
outline: none;
border: none;
background: inherit;
color: currentcolor;
font-size: inherit;
font-family: inherit;
cursor: pointer;
}
a {
text-decoration: none;
color: currentcolor;
}
main {
height: 100%;
> div {
display: flex;
gap: 6rem;
}
}
.btn {
--size: 40px;
width: var(--size);
height: var(--size);
position: relative;
display: grid;
place-content: center;
svg {
width: 100%;
height: 100%;
pointer-events: none;
}
}
[data-hover] {
position: relative;
[data-hover-bounds] {
position: absolute;
left: 0;
top: 0;
inset: 0;
/* outline: 1px solid red; */
}
&:hover {
[data-hover-bounds] {
transform: scale(4);
}
}
}
.cursor {
width: var(--cursor-size);
height: var(--cursor-size);
border-radius: 50%;
position: fixed;
left: 0;
top: 0;
transform: translate(-50%, -50%);
background: var(--background);
mix-blend-mode: difference;
pointer-events: none;
}
.cta {
width: 100px;
position: fixed;
top: -999px;
left: -999px;
pointer-events: none;
}In this CSS snippet, we define the basic styles for the cursor, buttons, and SVG icons. You can customize these styles to match your design preferences.
JavaScript Functionality
Finally, let’s add JavaScript code to implement the cursor effect.
/**
* Inspiration -> https://hello.cuberto.com
*/
console.clear();
import gsap from "https://esm.sh/gsap";
import { vec2 } from "https://esm.sh/vecteur";
class Cursor {
constructor(targetEl) {
this.el = targetEl;
this.position = {
previous: vec2(-100, -100),
current: vec2(-100, -100),
target: vec2(-100, -100),
lerpAmount: 0.1
};
this.scale = {
previous: 1,
current: 1,
target: 1,
lerpAmount: 0.1
};
this.isHovered = false;
this.hoverEl = null;
this.addListeners();
}
update() {
this.position.current.lerp(this.position.target, this.position.lerpAmount);
this.scale.current = gsap.utils.interpolate(
this.scale.current,
this.scale.target,
this.scale.lerpAmount
);
const delta = this.position.current.clone().sub(this.position.previous);
this.position.previous.copy(this.position.current);
this.scale.previous = this.scale.current;
gsap.set(this.el, {
x: this.position.current.x,
y: this.position.current.y
});
if (!this.isHovered) {
const angle = Math.atan2(delta.y, delta.x) * (180 / Math.PI);
const distance = Math.sqrt(delta.x * delta.x + delta.y * delta.y) * 0.04;
gsap.set(this.el, {
rotate: angle,
scaleX: this.scale.current + Math.min(distance, 1),
scaleY: this.scale.current - Math.min(distance, 0.3)
});
}
}
updateTargetPosition(x, y) {
if (this.isHovered) {
const bounds = this.hoverEl.getBoundingClientRect();
const cx = bounds.x + bounds.width / 2;
const cy = bounds.y + bounds.height / 2;
const dx = x - cx;
const dy = y - cy;
this.position.target.x = cx + dx * 0.15;
this.position.target.y = cy + dy * 0.15;
this.scale.target = 2;
const angle = Math.atan2(dy, dx) * (180 / Math.PI);
const distance = Math.sqrt(dx * dx + dy * dy) * 0.01;
gsap.set(this.el, { rotate: angle });
gsap.to(this.el, {
scaleX: this.scale.target + Math.pow(Math.min(distance, 0.6), 3) * 3,
scaleY: this.scale.target - Math.pow(Math.min(distance, 0.3), 3) * 3,
duration: 0.5,
ease: "power4.out",
overwrite: true
});
} else {
this.position.target.x = x;
this.position.target.y = y;
this.scale.target = 1;
}
}
addListeners() {
gsap.utils.toArray("[data-hover]").forEach((hoverEl) => {
// set hover states
{
const hoverBoundsEl = hoverEl.querySelector("[data-hover-bounds]");
hoverBoundsEl.addEventListener("pointerover", () => {
this.isHovered = true;
this.hoverEl = hoverBoundsEl;
});
hoverBoundsEl.addEventListener("pointerout", () => {
this.isHovered = false;
this.hoverEl = null;
});
}
// magnetic effect
{
const xTo = gsap.quickTo(hoverEl, "x", {
duration: 1,
ease: "elastic.out(1, 0.3)"
});
const yTo = gsap.quickTo(hoverEl, "y", {
duration: 1,
ease: "elastic.out(1, 0.3)"
});
hoverEl.addEventListener("pointermove", (event) => {
const { clientX: cx, clientY: cy } = event;
const { height, width, left, top } = hoverEl.getBoundingClientRect();
const x = cx - (left + width / 2);
const y = cy - (top + height / 2);
xTo(x * 0.2);
yTo(y * 0.2);
});
hoverEl.addEventListener("pointerout", () => {
xTo(0);
yTo(0);
});
}
});
}
}
const cursor = new Cursor(document.querySelector(".cursor"));
const cta = document.querySelector(".cta");
const menuBtn = document.querySelector(".menu-btn");
onResize();
function update() {
cursor.update();
}
function onMouseMove(event) {
const x = event.clientX;
const y = event.clientY;
cursor.updateTargetPosition(x, y);
}
function onResize() {
const { x, y, width, height } = menuBtn.getBoundingClientRect();
gsap.set(cta, {
left: x - width,
top: y + height
});
}
gsap.ticker.add(update);
window.addEventListener("pointermove", onMouseMove);
window.addEventListener("resize", onResize);In this JavaScript code, we select the cursor element and all elements with the data-hover attribute. Then, we attach a mousemove event listener to each button. When the mouse moves over a button, the cursor’s position is updated to follow the mouse pointer.
Conclusion
Congratulations! You’ve learned how to create a sticky/stretching cursor effect using HTML, CSS, and JavaScript. This effect can enhance the interactivity and visual appeal of your website or web application. Feel free to customize the code further to suit your project’s needs.
Happy Coding!
