マウスストーカーを透明のマスクにして背景を動的に切り取りたいのですが、どうすれば良いでしょうか？

前提・実現したいこと

あるウェブサイトのトップページを作っているのですが、
そこにあるレイヤーとしては、

背景写真
ロゴ
円形(直径300px)のマウスストーカー

があり、マウスストーカーの中のみロゴが透過して一番下の背景写真が見える、というものを作りたいです。マウスストーカーは今の所、円形の画像を用意し、tween maxを使ってそれがマウスに追従するようにしていますが、それも変える必要があるなら画像ではなく描画したものでも構いません。

どうすれば良いか全く方針が立っておらず、どんな風に書けば用意か、役立つライブラリはどんなものがあるか、教えていただけないでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6
7    <link rel="stylesheet" href="style.css">
8    <!--    <link href="https://fonts.googleapis.com/css?family=Rock+Salt&display=swap" rel="stylesheet">-->
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
10    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
11
12    <title>Online Resume</title>
13</head>
14
15<body>
16
17
18    <div class="MainScreen">
19
20        <img src="./images/haikei.png" alt="" class="main-haikei">
21        <div class="cursor"></div>
22        <div class="follower"><img src="./images/cercle.png" alt="" class="cercle"></div>
23        <img src="./images/logo.png" alt="" class="background">//
24
25    </div>
26    <script type="text/javascript">
27        var
28            cursor = $(".cursor"),
29            follower = $(".follower"),
30            cWidth = 8, //カーソルの大きさ
31            fWidth = 300, //フォロワーの大きさ
32            delay = 10, //数字を大きくするとフォロワーがより遅れて来る
33            mouseX = 0, //マウスのX座標
34            mouseY = 0, //マウスのY座標
35            posX = 0, //フォロワーのX座標
36            posY = 0; //フォロワーのX座標
37
38        //カーソルの遅延アニメーション
39        //ほんの少ーーーしだけ遅延させる 0.001秒
40        TweenMax.to({}, .001, {
41            repeat: -1,
42            onRepeat: function() {
43                posX += (mouseX - posX) / delay;
44                posY += (mouseY - posY) / delay;
45
46                TweenMax.set(follower, {
47                    css: {
48                        left: posX - (fWidth / 2),
49                        top: posY - (fWidth / 2)
50                    }
51                });
52
53                TweenMax.set(cursor, {
54                    css: {
55                        left: mouseX - (cWidth / 2),
56                        top: mouseY - (cWidth / 2)
57                    }
58                });
59            }
60        });
61
62        //マウス座標を取得
63        $(document).on("mousemove", function(e) {
64            mouseX = e.pageX;
65            mouseY = e.pageY;
66        });
67
68        $("a").on({
69            "mouseenter": function() {
70                cursor.addClass("is-active");
71                follower.addClass("is-active");
72            },
73            "mouseleave": function() {
74                cursor.removeClass("is-active");
75                follower.removeClass("is-active");
76            }
77        });
78    </script>
79</body>
80
81</html>

CSS
1* {
2    padding: 0;
3    margin: 0;
4}
5
6.main-haikei{
7    position: relative;
8    width: 100vw;
9    
10}
11
12.background{
13    width: 100vw;
14
15}
16
17
18body {
19  position: relative;
20  cursor: none; 
21}
22 
23.cursor,
24.follower {
25  border-radius: 50%;
26  position: absolute; 
27  top: 0;
28  left: 0; 
29  cursor: none; 
30  pointer-events: none;
31}
32 
33.cursor {
34  width: 8px;
35  height: 8px;
36  background-color: #000;
37  z-index: 1001; 
38}
39 
40.follower {
41  z-index: 1000; 
42  -webkit-background-clip: .follower;
43    
44}
45
46 
47.cercle{
48    width: 300px;
49    height: 300px;
50
51}