<style>
  css-doodle {
    --rule-spells:( :doodle {
      @grid: 50 x 40 / 490px 390px;
      padding: 5px;
    }
    :after {
      content: \@hex(@r(5000, 10000));
      transform: scale(@r(0.1, 1));
      color: #ffb300;
      opacity: @r(0.05, 0.1);
      transition: all .3s ease-in-out;
      font-size: 5px;
    }
    
    :hover :after {
      opacity: 1;
      transform: scale(4);
    }
    z-index: 2;
    transition: all .3s ease-in-out;
    
    @keyframes move {
      0%, 40%, 100% {
        transform: scale(@r(.1, .9));
      }
      20% {
        transform: scale(@r(.1, .3));
        ;
      }
      80% {
        transform: scale(@r(.7, .9));
        ;
      }
    }
    );
  }
</style>

<div class="container">
<css-doodle id="source" use="var(--rule-spells)"></css-doodle>
<div class="wrapper">
</div>
<div class="magnifyingGlass"></div>
</div>

<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;
  
  .container {
    position: relative;
    height: 400px;
    width: 500px;
    border: 20px solid white;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    cursor: none;
    
    .wrapper {
      position: absolute;  
    }

      .magnifyingGlass {
        position: absolute;
        height: 128px;
        width: 128px;
        background: url(http://codemenatalie.com/wp-content/uploads/2019/10/search.svg) no-repeat;
        z-index: 1;
      }
    }

  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
    z-index: 5;
  }
}
View Compiled
$(document).on("mousemove", function(e) {
  const x = e.pageX - $(".container").offset().left;
  const y = e.pageY - $(".container").offset().top;
  $(".magnifyingGlass").css({
    left: x - 65,
    top: y - 60
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/css-doodle@0.7.3/css-doodle.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js