fredriccliver · September 4, 2021 11:05
diff --git a/cursor.html b/cursor.html
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
 <html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <style>
      li {
        list-style: none;
      }

      body {
        font-size: 2rem;
        height: 100%;
        min-height: 100%;
        cursor: none;
        color: #000;
        background-color: #fff;
      }
      
      .cursor {
        position: absolute;
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
        top: var(--y, 0);
        left: var(--x, 0);
        transform: translate(-50%, -50%);
        z-index: 2;
        mix-blend-mode: difference;
        transition: transform .2s;
        pointer-events: none;
      }

      li:hover ~ .cursor {
        transform: scale(2);
      }

    </style>
  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->

    <ul>
      <a href=""><li>Home</li></a>
      <li>About</li>
      <li>Portfolio</li>
      <li>Team</li>
      <li>Contact</li>
      <div class="cursor"></div>
    </ul>

    

    <script>
      document.body.onmousemove = function(e) {
        document.documentElement.style.setProperty (
          '--x', (
            e.clientX+window.scrollX
          )
          + 'px'
        );
        document.documentElement.style.setProperty (
          '--y', (
            e.clientY+window.scrollY
          ) 
          + 'px'
        );
      }
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title></title>
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="" />
	<style>
	li {
	list-style: none;
	}

	body {
	font-size: 2rem;
	height: 100%;
	min-height: 100%;
	cursor: none;
	color: #000;
	background-color: #fff;
	}

	.cursor {
	position: absolute;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	top: var(--y, 0);
	left: var(--x, 0);
	transform: translate(-50%, -50%);
	z-index: 2;
	mix-blend-mode: difference;
	transition: transform .2s;
	pointer-events: none;
	}

	li:hover ~ .cursor {
	transform: scale(2);
	}

	</style>
	</head>
	<body>
	<!--[if lt IE 7]>
	<p class="browsehappy">
	You are using an <strong>outdated</strong> browser. Please
	<a href="#">upgrade your browser</a> to improve your experience.
	</p>
	<![endif]-->

	<ul>
	<a href=""><li>Home</li></a>
	<li>About</li>
	<li>Portfolio</li>
	<li>Team</li>
	<li>Contact</li>
	<div class="cursor"></div>
	</ul>



	<script>
	document.body.onmousemove = function(e) {
	document.documentElement.style.setProperty (
	'--x', (
	e.clientX+window.scrollX
	)
	+ 'px'
	);
	document.documentElement.style.setProperty (
	'--y', (
	e.clientY+window.scrollY
	)
	+ 'px'
	);
	}
	</script>
	</body>
	</html>