Dynamically change SVG cursor

user_10156004 0
Viewed 1597

I have created SVG cursor and I would like to dynamically change cursor radius on mouse scroll, zoom in increase radius, zoom out decrease radius.

CSS SVG cursor, this works:

.brushCursor {
    cursor: url('data:image/svg+xml;utf8,<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><circle cx="10" cy="10" r="5" stroke-width="2" style="stroke: black; fill: red;"/></svg>') 10 10, pointer;
}

But I want to change SVG's radius dynamically. Radius should be in the range 1 to 10. So far I made this but the cursor is not updating:

const brush = document.querySelector('.brush');
const radius = 5;

brush.style.cursor = `url('data:image/svg+xml;utf8,<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><circle cx="10" cy="10" r=${radius} stroke-width="2" style="stroke: black; fill: red;"/></svg>')`;
svg css javascript
1 Answers

I'm creating a new <style> element s and I'm adding the rule to that.

An input type='range' is used to change the radius.

let r = 3;
let s = document.createElement("style");
document.head.appendChild(s);
changeCursor(r)

test.addEventListener("input", ()=>{
  r = test.value;
  changeCursor(r)
})

function changeCursor(r){
  let rule = `cursor: url('data:image/svg+xml;utf8,<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><circle cx="10" cy="10" r="${r}" stroke-width="2" style="stroke: black; fill: red;"/></svg>') 10 10, pointer;`
  
  s.textContent = `.brushCursor { ${rule} }`;
  
}
.brushCursor {
  height:100vh;
  /*cursor: url('data:image/svg+xml;utf8,<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><circle cx="10" cy="10" r="3" stroke-width="2" style="stroke: black; fill: red;"/></svg>') 10 10, pointer;*/
}
  #test{position:absolute; top:1em;}
<div class="brushCursor"></div>
<input id="test" type="range" min="2" max="7" value="3" />

In order to change it on scroll I would need to know more. The input I'm using has a max = 7. Maybe 8 would do; however a bigger radius would give you a cuted circle. How exactly would you want to grow your circle on scroll. Also pages have different heights. Is it "scroll" or is it "wheel" the event you plan to use?

user_78973950
Related