SVG Mask

Demo

Mouse hover here to find a sheep

How to

  1. Define <linearGradient>
  2. fill gradient color by using css

vue

<script setup>
const onMousemove = (e) => {
  const { left, top } = e.currentTarget.getBoundingClientRect();
  maskEl.value.style.transform = `translateX(${e.clientX - left}px) translateY(${e.clientY - top}px)`;
};
</script>
<template>
  <svg viewBox="0 0 512 512" @mousemove="onMousemove">
    <defs>
      <mask id="mask-circle">
        <circle cx="0" cy="0" r="150" fill="white" ref="maskEl"></circle>
      </mask>
    </defs>
    <g mask="url(#mask-circle)">
      ...
    </g>
  </svg>
<template>