JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg class="cursor" width="120" height="120" viewBox="0 0 120 120" style="opacity: 1; transform: translateX(149px) translateY(136px);">
			<defs>
				<filter id="cursor-filter" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
					<feTurbulence type="fractalNoise" seed="6" baseFrequency="0.1692" numOctaves="1" result="warp"></feTurbulence>
					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="20" in="SourceGraphic"></feDisplacementMap>
				</filter>
			</defs>
			<circle class="cursor__inner" cx="60" cy="60" r="29.000000000000004" style="filter: url('#cursor-filter');"></circle>
		</svg>

SCSS

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

body {
  --cursor-fill: #d6106c;
}

.cursor {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		pointer-events: none;
		z-index: 10000;
	}

	.cursor__inner {
		fill: var(--cursor-fill);
	}

	.no-js .cursor {
		display: none;
	}