Mouse Cursor

Copy

#container {
  overflow: auto;
}

.cursor-box {
  display: inline-block;
}

.element-png {
  text-align: center;
  color: #ffffff;
  padding: 30px;
  width: 300px;
  height: 300px;
  background: red;
  border-radius: 400px;
  cursor: url(data/img/dot.png) 10 10, auto;
}

.element-svg {
  text-align: center;
  color: #ffffff;
  padding: 30px;
  width: 300px;
  height: 300px;
  background: red;
  border-radius: 400px;
  cursor: url(data/img/dot.png) 10 10, auto;
}

.element-svg-base64 {
  text-align: center;
  color: #ffffff;
  padding: 30px;
  width: 300px;
  height: 300px;
  background: red;
  border-radius: 400px;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABpUlEQVQ4y7WVPXLbMBBGn+2G6cAOJdypo8qUuEF0A/EGPoKPwMkJPOyois4NWLoUSlXEDbjsoAopBCQaWbSdif3NYIbNvtmfb5c3vC+VHoCkt6ibNyBroALMBdADDthfg18DroEfgAXW6qQTTQQRkQQbgF/pexG4Bh6AjTFGWWupqopzoHOOYRjw3gvwDPy8hJ7DnsqyFGttbJomjuMYLzWOY2yaJlprY1mWAjyl2Fc9ewQma23s+z5O0xSXNE1T7Ps+WmsjMKVYBXCXgN+B2hiz2m63bDabP2VeU1EUaK0JIXA4HIpTWzmkgUHq21TX9dUylzSOY6zrOmf5AHCbUjVKKVVVFcYYPipjTB6ayvbKQKWUerPMRdf/jVMZ+Km6zeuUTPvPgLM4ASQDvYiIcw7v/Ydh3nucc3l7PCDZNt+AlYgYpRSr1YqiKN7NrOs6drsdIvIC7AB/d7b0WkTWx+Ox0FqjtV6EigjDMNC2Lfv9XoAu7XXIwADMgJrn+d57X4QQ0Fq/mrz3nq7raNsW59wcQngG2mzqTz8OX36+vuTA/tcv4DcQ5j3msmvKlAAAAABJRU5ErkJggg==) 10 10, auto;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Mouse Cursor</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>

    <style>
      #container {
        overflow: auto;
      }

      .cursor-box {
        display: inline-block;
      }

      .element-png {
        text-align: center;
        color: #ffffff;
        padding: 30px;
        width: 300px;
        height: 300px;
        background: red;
        border-radius: 400px;
        cursor: url(data/img/dot.png) 10 10, auto;
      }

      .element-svg {
        text-align: center;
        color: #ffffff;
        padding: 30px;
        width: 300px;
        height: 300px;
        background: red;
        border-radius: 400px;
        cursor: url(data/img/dot.png) 10 10, auto;
      }

      .element-svg-base64 {
        text-align: center;
        color: #ffffff;
        padding: 30px;
        width: 300px;
        height: 300px;
        background: red;
        border-radius: 400px;
        cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABpUlEQVQ4y7WVPXLbMBBGn+2G6cAOJdypo8qUuEF0A/EGPoKPwMkJPOyois4NWLoUSlXEDbjsoAopBCQaWbSdif3NYIbNvtmfb5c3vC+VHoCkt6ibNyBroALMBdADDthfg18DroEfgAXW6qQTTQQRkQQbgF/pexG4Bh6AjTFGWWupqopzoHOOYRjw3gvwDPy8hJ7DnsqyFGttbJomjuMYLzWOY2yaJlprY1mWAjyl2Fc9ewQma23s+z5O0xSXNE1T7Ps+WmsjMKVYBXCXgN+B2hiz2m63bDabP2VeU1EUaK0JIXA4HIpTWzmkgUHq21TX9dUylzSOY6zrOmf5AHCbUjVKKVVVFcYYPipjTB6ayvbKQKWUerPMRdf/jVMZ+Km6zeuUTPvPgLM4ASQDvYiIcw7v/Ydh3nucc3l7PCDZNt+AlYgYpRSr1YqiKN7NrOs6drsdIvIC7AB/d7b0WkTWx+Ox0FqjtV6EigjDMNC2Lfv9XoAu7XXIwADMgJrn+d57X4QQ0Fq/mrz3nq7raNsW59wcQngG2mzqTz8OX36+vuTA/tcv4DcQ5j3msmvKlAAAAABJRU5ErkJggg==) 10 10, auto;
      }
    </style>
  </head>
  <body>
    <div id="container" class="main">
      <div class="cursor-box">
        <h2>PNG Cursor</h2>
        <div class="element-png">
          Mouse over
        </div>
      </div>

      <div class="cursor-box">
        <h2>SVG Cursor</h2>
        <div class="element-svg">
          Mouse over
        </div>
      </div>

      <div class="cursor-box">
        <h2>SVG base64 Cursor</h2>
        <div class="element-svg-base64">
          Mouse over
        </div>
      </div>
    </div>
    <script>
    </script>
  </body>
</html>