<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <svg id="cursor" width="30" height="30"> <defs> <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#f2c061"></stop> <stop offset="100%" stop-color="#da1b60"></stop> </linearGradient> </defs> <circle r="13" cx="15" cy="15" fill="none"></circle> <line x1="0" y1="0" x2="30" y2="30"></line> <line x1="0" y1="30" x2="30" y2="0"></line> </svg>

#cursor { position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } line, circle { stroke: url("#gradient"); stroke-width: 3; transform-origin: 50% 50%; opacity: 1; } line { animation: op-1 2s ease-out infinite; } circle { animation: op-1 2s ease-out 1s infinite, op-2 2s ease-out 1s infinite; } body { margin: 0; overflow: hidden; display: flex; height: 100vh; background: #1d1e22; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAQAAADxYuQrAAAAWklEQVQI12NgAAFZBgRQBBGSDJITRRFiPUA+w0RRIIUCkPlGQGiGKq3XI9mo1iHLoIcsqAaltRjQ7URzB9hONHcAAcgVCHtBtqICI4Z6LaA8sp1GMCOQ7QSyAcvLDf4Fs8YtAAAAAElFTkSuQmCC"); cursor: none; } @-moz-keyframes op-1 { 50% { opacity: 0.1; transform: rotate(7200deg); } } @-webkit-keyframes op-1 { 50% { opacity: 0.1; transform: rotate(7200deg); } } @-o-keyframes op-1 { 50% { opacity: 0.1; transform: rotate(7200deg); } } @keyframes op-1 { 50% { opacity: 0.1; transform: rotate(7200deg); } } @-moz-keyframes op-2 { 50% { transform: scale(0.2); } } @-webkit-keyframes op-2 { 50% { transform: scale(0.2); } } @-o-keyframes op-2 { 50% { transform: scale(0.2); } } @keyframes op-2 { 50% { transform: scale(0.2); } }

const bd = document.body, cur = document.getElementById("cursor"); bd.addEventListener("mousemove", function(n) { (cur.style.left = n.clientX + "px"), (cur.style.top = n.clientY + "px"); });