Changing the opacity of an area based on mouse position

Question

Is it possible to change the opacity of the background, but only under the cursor area (for example, a white small circle)? I think of it a bit like a basic heatmap, but there is no heat left - it just follows the cursor.

I currently have

HTML:

html { background-color: #000; width: 100%; height: 100%; } 

JS:

 $(document).mousemove(function(event){ var i = event.pageX.toPrecision(1) / 1000; $("html").css('opacity', i) }); 

Sorry, this is probably a very simple starting point. Do I need to use canvas?

Answer 1

You can do it using svg

What I've done: -

I placed two identical images with the same coordinates, height and width and gave the circular clip-path one on top (which has full opacity), when the mouse moves the position of the circle, it also changes

 $('svg').on('mousemove',function(e){ $('.a').attr('cx',e.pageX).attr('cy',e.pageY) }) 

 .one{ opacity:.5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg width="500" height="500"> <clippath id="clip" > <circle cx="50" cy="50" r="50" class="a"/> </clippath> <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" class="one"/> <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" clip-path="url(#clip)"/> </svg>