jQuery toggleClass example

Toggle class name on click in jQuery

by jwpg018241

HTML

<div class="container">
  <img src="https://www.typotheque.com/ssadmin/assets/FontImageGenerator/AaImage29.png">
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Monaco;
  font-size: 12px;
  color: rgba(0, 0, 0, .7);
}

.container {
  position: relative;
  width: 100%;
  min-height: 100vh;

  --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M185.3,77.9v-3.7h-3.7v-11h-3.7V52h-3.7v-3.7h-3.7v-7.4h-3.7v-3.7h-3.7v-7.4h-3.7V26h-3.7v-3.7h-7.4v-3.7h-3.7 v-3.7h-3.7v-3.7h-7.4V7.4h-11.1V3.7h-11.2V0h-3.5v3.5h-3.9V0H77.6v3.5h-3.9V0h-3.6v3.6H59v3.7h-7.4v7.4h-3.8v-3.5h-3.6v3.6h-3.7v3.7 h-7.4v7.4h-7.3v3.7h-3.7v3.7h-3.7v7.4h-3.7v7.4h-3.7v3.7H7v11.2H3.2v14.9h-3.6v22.1h3.5v3.9h-3.5v3.6h3.6v14.9h3.7v7.4h3.7v7.4h3.7 v7.4h3.7v3.7h3.7v7.4h7.4v7.5h3.7v-3.7h3.7v3.7h3.7v7.3H44v3.7h3.6v-3.5h3.9v3.6h3.7v3.7h7.4v3.7h11.1v3.8h14.9c0-2.5,0-4.9,0-7.4 l0,0l0,0H85v-3.7h3.7v3.7l0,0l0,0h3.7v7.4h7.4c0-1.2,0-2.5,0-3.7l0,0l0,0h-3.7v-3.7h3.7v3.7l0,0l0,0l15.7-0.1h2.8 c0.1-1.3,0.1-2.4,0.2-3.6l0,0l0,0h-3.6v-7.4h3.6v7.4l0,0l0,0l7.4-0.1c0-1.2,0-2.4,0.1-3.7l0,0l0,0h-3.6v-3.7h3.6l0,0l0,0v-3.7l0,0 l0,0h-3.7v-3.7l0,0l0,0h-3.7v-3.7l0,0l0,0h-3.7v-3.7h3.7v3.7l0,0l0,0h3.7v3.6l0,0l0,0h3.7v3.7l0,0l0,0h3.6v3.7h-3.6l0,0l0,0v3.7l0,0 l0,0h7.3v-3.7h3.8v3.5h3.7v-11l0,0l0,0H137l0,0l0,0v3.6h-3.7v-3.6l0,0l0,0h-3.7v-3.7l0,0l0,0h-3.7v-3.7h3.7v3.7l0,0l0,0h3.7v3.8l0,0 l0,0h3.7l0,0l0,0v-3.6h3.7v3.6l0,0l0,0h3.8v-3.7h3.7v3.7h7.3v-3.6h-3.5v-3.9h7.4v-7.4l0,0l0,0h-3.7v-3.6h3.7v3.7l0,0l0,0h3.7v3.5 h3.6v-7.2H163V141h11v-3.6h-3.5v-3.9h7.3v-7.2h-3.6v-3.8l0,0l0,0h-3.7v-3.7h3.7v3.6l0,0l0,0h7.4v-14.9l0,0l0,0h-3.7V104l0,0l0,0 h-3.7v-3.7h3.7v3.7l0,0l0,0h3.7v3.7l0,0l0,0h3.7V92.8h-3.7v-3.7h3.7v-7.4h-3.7v-3.7L185.3,77.9z M47.7,167.1h-3.7v-3.7h3.7V167.1z M58.8,170.8h-3.7v-3.7h3.7V170.8z M58.9,155.9h-3.7v-3.7h3.7V155.9z M70.1,141.1h3.7v3.7h-3.7V141.1z M62.6,118.7v-3.6h3.6v3.6 H62.6z M66.3,170.8h-3.7v-3.7h3.7V170.8z M81.2,181.9h-3.7v-3.7l0,0l0,0h-3.7v-7.4l0,0l0,0h-3.7v-3.7h3.7v3.7l0,0l0,0h3.7v7.4l0,0 l0,0h3.7V181.9z M81.2,137.3h-3.7v-3.7h3.7V137.3z...

JavaScript

const htmlElem = document.documentElement;
document.addEventListener('mousemove', onDocumentMousemove);

function onDocumentMousemove(evt) {
  htmlElem.style.setProperty('--x', `${evt.clientX - 200}px`);
  htmlElem.style.setProperty('--y', `${evt.clientY - 200}px`);
}