How can I incorporate a personalized SVG path to serve as a cursor on a webpage?

Is there a way to enhance the functionality of binding the 'mousemove' event to a div and moving it around the page while hiding the real cursor? Specifically, can we change the shape of the circle to an SVG path and drag the SVG path around the page instead of a circle?

  document.onmousemove = function(e) {
  document.getElementsByClassName('cursor')[0].style.setProperty('--x',(e.clientX)+'px');
  document.getElementsByClassName('cursor')[0].style.setProperty('--y',(e.clientY)+'px');
  }
  body {
  background-color: black;
  cursor: none;
  }
  .cursor {
  content:"";
  position:absolute;
  z-index:999;
  top:0;
  left:0;
  right:0;
  bottom:0; 
  background:
  radial-gradient(farthest-side ,#fff 95%,transparent 100%)
  calc(var(--x) - .75em) calc(var(--y) - .75em)/1.5em 1.5em  fixed no-repeat;
  mix-blend-mode:difference;
  pointer-events: none;
  cursor: none;
  }
  <body>
  <div class="cursor">
  </div>
  </body>

javascripthtmljquerycsssvg

Answer №1

It was a success for me.

  document.onmousemove = function(e) {
  document.getElementsByClassName('cursor')[0].style.setProperty('--x',(e.clientX)+'px');
  document.getElementsByClassName('cursor')[0].style.setProperty('--y',(e.clientY)+'px');
  }
  body {
  background-color: black;
  cursor: none;
  }
  .cursor {
  content:"";
  position:absolute;
  top: var(--y);
  left: var(--x);
  pointer-events: none;
  cursor: none;
  }
  <body>
  <body>
    <svg width="3.5%" class="cursor" version="1.1" viewBox="0 0 60 210" xmlns="http://www.w3.org/2000/svg">
        <title>Sword</title>
        <desc>https://www.sololearn.com/Profile/8896242</desc>
        <defs>
            <linearGradient id="edge_grad">
                <stop offset="0%" stop-color="white" />
                <stop offset="10%" stop-color="grey" />
                <stop offset="100%" stop-color="black" />
            </linearGradient>
            <linearGradient id="dol_grad">
                 <stop offset="0%" stop-color="black" />
                 <stop offset="50%" stop-color="grey" />
                 <stop offset="100%" stop-color="black" />
            </linearGradient>
            <linearGradient id="gard_grad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="white" />
                <stop offset="20%" stop-color="grey" />
                <stop offset="100%" stop-color="black" />
            </linearGradient>
            <radialGradient id="ruby_grad">
                <stop offset="0%" stop-color="#900020" />
                <stop offset="50%" stop-color="#f50029" />
                <stop offset="100%" stop-color="#7b001c" />
            </linearGradient>
            <linearGradient id="handle_grad">
                <stop offset="0%" stop-color="#cc6600" />
                <stop offset="20%" stop-color="#753313" />
                <stop offset="100%" stop-color="#4d220e" />
            </linearGradient>
            <linearGradient id="pommel_grad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#5b6669" />
                <stop offset="20%" stop-color="#434b4d" />
                <stop offset="70%" stop-color="#23282b" />
                <stop offset="100%" stop-color="#000000" />
            </linearGradient>
        </defs>
        <g stroke="black">
            <path id="edge" fill="url(#edge_grad)" d="M20,150 v-130 l10,-20 l10,20 v130 l-10,-2.5 z" />
            <path id="dol" fill="url(#dol_grad)" d="M28,148 v-130 q2,-5 4,0 v130 l-2,-1 z" />
            <path id="gard" fill="url(#gard_grad)" d="M0,150 h20 l10,-2.5 l10,2.5 h20 l-25,10 q-5,1.5 -10,0 z" />
            <g id="ruby">
                <path fill="url(#ruby_grad)" d="M20,150 l10,-2.5 l10,2.5 l-5,10 q-5,1.5 -10,0 z" />
                <line x1="20" y1="150" x2="30" y2="154" />
                <line x1="30" y1="147.5" x2="30" y2="154" />
                <line x1="40" y1="150" x2="30" y2="154" />
                <line x1="25" y1="160" x2="30" y2="154" />
                <line x1="35" y1="160" x2="30" y2="154" />
            </g>
            <g id="handle">
                <path fill="url(#handle_grad)" d="M25,160 v30 q5,2.5 10,0 v-30 q-5,1.5 -10,0 z" />
                <line x1="25" y1="162" x2="30" y2="161" />
                <line x1="25" y1="165" x2="35" y2="162" />
                <line x1="25" y1="168" x2="35" y2="165" />
                <line x1="25" y1="171" x2="35" y2="168" />
                <line x1="25" y1="174" x2="35" y2="171" />
                <line x1="25" y1="177" x2="35" y2="174" />
                <line x1="25" y1="180" x2="35" y2="177" />
                <line x1="25" y1="183" x2="35" y2="180" />
                <line x1="25" y1="186" x2="35" y2="183" />
                <line x1="25" y1="189" x2="35" y2="186" />
                <line x1="27" y1="191" x2="35" y2="189" />
            </g>
            <g id="pommel">
                <path fill="url(#pommel_grad)" d="M25,190 l-5,13 l10,7 l10,-7 l-5,-13 q-5,2.5 -10,0 z" />
                <line x1="30" y1="191.5" x2="30" y2="210" />
                <line x1="20" y1="203" x2="40" y2="203" />
            </g>
        </g>
    </svg>
  </div>
  </body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting THREE.Raycaster to intersect with THREE.PointCloud

Currently, I am trying to implement click events on my WebGL based 3D graph library called Graphosaurus. You can take a look at what I have done so far here. I have used this example as a reference. I am wondering if the reason it is not functioning corr ...

javascriptgraph3dthree.js

The surprising way Next.js disabled the production build and transformed my rgba color into hsla

I created CSS code to display grid patterns like this: background-image { repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20 ...

cssnext.jsrgba

New programmer seeking to apply a dim effect to the entire photo while also adding a highlight when the image is hovered over

I am looking to add a special effect to my photos where they appear dimmed but highlighted when hovered over. Any guidance on how to achieve this would be greatly appreciated! The image is contained within a flexbox div that also contains a clickable lin ...

htmlcss

Understanding how to set the Content-Type in a Post request using Ajax with Node.js

Attempting to send an ajax request without a header in Node.js triggers an error: { [Error: unsupported content-type] status: 415, statusCode: 415 } However, when sending a request with a header, Node.js does not seem to respond. Here is my ajax funct ...

javascriptajaxnode.js

Destructuring array in React using Javascript

I'm currently exploring ReactJS and I'm facing a dilemma in understanding the destructuring process in the code snippet below: const IngredientsList = ({ list }) => React.createElement('ul', null, list.map((ingredient, i ...

javascriptreactjsdestructuring

Random Exclamation Point Appears in Outcome of PHP HTML-Email

I have been encountering exclamation points appearing randomly in the output of my PHP email function. After some research, I learned that this could be due to long lines or the need to encode the email in Base64. However, I am unsure how to go about doing ...

htmlemailphp

Utilizing ng-class for dynamic routing and controlling

I am currently in the process of developing a dynamic framework using AngularJS. My plan involves allowing users to add new templateUrl and controller from a JSON file, like the one shown in templates.json: { "pages" : [ { "name" : "home" ...

javascriptangularjsjsontemplatesdynamic

Does the Apps Script parser JSON.parse() incorrectly remove leading zeros from string object keys?

I am facing an issue with my Apps Script Web App where JSON data is being manipulated when I try to parse it. Specifically, keys with leading zeros are being altered (e.g "0123" becomes "123") during the JSON.parse() function call. It seems like the functi ...

javascriptjsongoogle-apps-script

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

I am currently in the process of customizing the FlexNav Plugin. I have made a modification to allow sub-menus to open on click instead of hover. However, a new issue has arisen where it requires two clicks to open a submenu. Upon investigation, I have i ...

javascriptjquerycss

Upon adding data to mongodb, an error message is displayed stating "Cannot read property '_id' of undefined."

Backend Server-Side Code The following is my server-side code. Below it, you can find the client-side code along with the error that is being displayed. I am having trouble identifying what the issue might be. app.post("/service", async (res, re ...

javascriptnode.jsmongodbserver

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

Could use a hand with this one. The function below is empty and I'm a bit stuck on what to do next. Right now, the webpage displays the factorized number, but I want to show the mathematical equation before it, like so: User inputs: 3 Site outputs: " ...

javascriptjqueryfunction

Modify the color of a sub division's background using CSS when hovering over

As I work on this Fiddle, my goal is to change the background of each div section individually when moused over. However, currently, hovering over one section triggers the background change for all sections. Is there a way to ensure that only the specific ...

htmlcss

Disable the default form input reset button generated by Internet Explorer 10

Just have one field form for search input. Below is the HTML code: <form class = "search-form hide-on-mobile"> <input class = "global" type = "text" placeholder = "Who are you looking for ?"> <but ...

htmlcssinternet-explorer-10

Retrieve JSON information using AJAX

As I am new to JSON and Ajax, the question I have may seem basic. When I try to display data from my JSON object containing 'name', 'task', 'date', and 'status' using Ajax, it does not show up on my page. Below is m ...

javascriptjqueryajaxjson

Preventing page refresh when typing in a form input: Tips and tricks

I'm currently puzzled by a small issue. In my web application, I have a chat box that consists of an input[type='text'] field and a button. My goal is to send the message to the server and clear the input field whenever the user clicks the b ...

javascripthtmlangularjstwitter-bootstrap

Having Trouble Finding Vue Component Definition Using Vite Alias in Import Path

When I click on the Component within the code snippet: import Component from '@/components/Component.vue'; I am unable to navigate to its definition when using vite alias. Seeking a potential solution. ...

javascriptvue.jsvisual-studio-codeimportvite

What is the best way to incorporate multiple vertical axes (y) into a Google chart?

I created a line graph with 2 lines that refresh every 5 seconds. Now, I'm trying to add dual vAxis on the left and right side. However, I can't seem to display the vAxis title. How can I fix this? Here is the chart option that I added: This ...

javascriptjspchartsgoogle-visualization

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

javascripthtmlcss

Having trouble with setting up ENV variables while deploying the app on Heroku

I recently deployed my node.js app to Heroku, and I'm facing some issues with its functionality. The app loads fine, but when I try to sign in, it breaks down. It seems like the environment variables are not loading correctly, specifically the db vari ...

javascriptnode.jsexpressherokumongoose

Insufficient module names remaining in NPM

Starting to release modules on NPM has been on my mind, but I can't help but worry about the limited availability of sensible module names in the public domain. Is there a way to create a public NPM module that organizes all my module names within a ...

javascriptnode.jsnpm