Custom Cursors

Add Custom Interactive Cursors to your Website with Canvas.

Usage

<body class="stretched" data-custom-cursor="true">

Note: You can also set the cursor:true, option in the js/functions.js FIle to set the Custom Cursor on all the Pages by default

Settings

Setting	Description
`.cnvs-cursor-border`	Add this Class to the `.cnvs-cursor` using the JS Code below to set a different style for the Custom Cursor. Example: [ch_pre][/ch_pre]

CSS Variables

.cnvs-cursor {
	--cnvs-cursor-size: 0.75rem;
	--cnvs-cursor-bg: var(--cnvs-themecolor);
	--cnvs-cursor-opacity: 0.15;
	--cnvs-cursor-border-opacity: 1;
	--cnvs-cursor-action-size: 4rem;
	--cnvs-cursor-action-bg: var(--cnvs-themecolor);
	--cnvs-cursor-action-opacity: 0.35;
}