'Is there a way to add a variable to the clip-path url?

I'd like to give Clip-path Musemove Effects. If it's a circle, you can give a var value like this in css

    clip-path: circle(40% at var(--x, 50%) var(--y, 50%));

But I don't know how to enter the var value if url goes in.

    clip-path: url(#heart);

Is there any workaround?

<script>
const htmlElem = document.documentElement;
document.addEventListener('mousemove', onDocumentMousemove);

function onDocumentMousemove(evt) {
htmlElem.style.setProperty('--x', `${evt.clientX}px`);
htmlElem.style.setProperty('--y', `${evt.clientY}px`);
}
</script>

jsfiddle In the case of circle - It's working.

jsfiddle In the case of url - It's not working.

cssurl


Solution 1:[1]

Use the SVG as mask instead.

const htmlElem = document.documentElement;
document.addEventListener('mousemove', onDocumentMousemove);

function onDocumentMousemove(evt) {
  htmlElem.style.setProperty('--x', `${evt.clientX - 100}px`);
  htmlElem.style.setProperty('--y', `${evt.clientY - 100}px`);
}
html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Monaco;
  font-size: 12px;
  color: rgba(0, 0, 0, .7);
}

.container {
  position: relative;
  width: 100%;
  --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z" /></svg>' ) ;
  -webkit-mask: var(--m) var(--x, 50%) var(--y, 50%) no-repeat;
          mask: var(--m) var(--x, 50%) var(--y, 50%) no-repeat;
  background-color: blue;
}

img {
 max-width:100%;
}
<div class="container">
  <img src="https://www.typotheque.com/ssadmin/assets/FontImageGenerator/AaImage29.png">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif

Related Questions