Mouse Effect - SVG Firework under click

Developer
Matthew Chase
Size
2,908 Kb
Views
52,624
  1. Mouse Effect - SVG Firework under click Previews
  2. Mouse Effect - SVG Firework under click HTML Codes
  3. Mouse Effect - SVG Firework under click CSS Codes
  4. Mouse Effect - SVG Firework under click JS Codes

How do I make an mouse effect - svg firework under click?

What is a mouse effect - svg firework under click? How do you make a mouse effect - svg firework under click? This script and codes were developed by Matthew Chase on 24 September 2022, Saturday.

Mouse Effect - SVG Firework under click Previews
IQ Test

Mouse Effect - SVG Firework under click - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mouse Effect - SVG Firework under click</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oleo+Script'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main" class="main"></div> <script src="js/index.js"></script>
</body>
</html>

Mouse Effect - SVG Firework under click - Script Codes CSS Codes

body{ min-height: 100vh; font-family: 'Oleo Script'
}
.main{ width: 480px; height: 120px; text-align: center; line-height: 120px; margin: 1em auto; background-color: rgba(128, 0, 0, 0.1); border: 3px dashed #c88; border-radius: 60px; animation-duration: 0.2s; animation-direction: alternate; animation-iteration-count: 2; user-select: none;
}
.main::before{ content: 'Click Me!'; font-size: 48px; color: #c88; pointer-events: none;
}

Mouse Effect - SVG Firework under click - Script Codes JS Codes

var MouseEffects = (function(){	var popCount = 4;	var dotCount = 7;	var dotFill = 'rgba(255, 0, 0, 0.8)';	var dotStroke = 'rgba(0, 0, 0, 0.8)';	var dotRadius = 4;	var dotRadiusJitter = 0.75;	var dotThetaJitter = 0.1;	var popSize = 100;	var popCenter = popSize * 0.5;	var popRadius = popSize * 0.4;	var popRadiusJitter = 0.25;	var popDuration = 0.25; //seconds	var popEasingFunction = 'ease-in';	var svgNamespace = 'http://www.w3.org/2000/svg';	var tau = Math.PI * 2;	function applyJitter(n, jitter){ var j = (Math.random() * jitter) - (jitter * 0.5); return n + n*j;	}	function generatePopAtCoordinates(x, y){	for(var i=0; i<popCount; i++){	popFactory(x, y);	}	}	function popFactory(x, y){ var i, dot, theta; var container = popContainerFactory(popSize, x, y); for(i=0; i<dotCount; i++){ dot = popDotFactory(dotFill); dot.setAttribute('cx', popCenter); dot.setAttribute('cy', popCenter); var dotRadius = applyJitter(popRadius, popRadiusJitter); container.appendChild(dot); theta = applyJitter(tau * (i / dotCount), dotThetaJitter); var dx = Math.cos(theta) * dotRadius; var dy = Math.sin(theta) * dotRadius; movePopDot(dot, dx, dy); } document.body.appendChild(container); setTimeout(function(){ document.body.removeChild(container); }, popDuration * 1000);	}	function movePopDot(dot, dx, dy){ var style = 'transition: all '+popDuration+'s '+popEasingFunction+'; transform: translate('+dx+'px, '+dy+'px); opacity: 0;'; setTimeout(function(){ dot.setAttribute('style', style); }, 0)	}	function popContainerFactory(size, x, y, border){ var container = document.createElementNS(svgNamespace, 'svg'); var style = ''; var containerStyle = { position: 'fixed', width: size + 'px', height: size + 'px', left: (x - (size / 2)) + 'px', top: (y - (size / 2)) + 'px', transform: 'rotate('+(Math.random() * 360)+'deg)', 'pointer-events': 'none', 'mix-blend-mode': 'overlay' }; if(border){ containerStyle.border = '1px solid red'; } for(var key in containerStyle){ style += (key + ': ' + containerStyle[key] + '; '); } container.setAttribute('viewBox', '0 0 100 100'); container.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); container.setAttribute('style', style); return container;	}	function popDotFactory(color){ var dot = document.createElementNS(svgNamespace, 'circle'); var r = applyJitter(dotRadius, dotRadiusJitter); dot.setAttribute('fill', color); dot.setAttribute('r', r); dot.setAttribute('stroke', dotStroke); dot.setAttribute('style', 'transition: all '+popDuration+'s '+popEasingFunction+'; transform: translate(0, 0); opacity: 1;'); return dot;	}	return {	generatePopAtCoordinates: generatePopAtCoordinates	};
})()
document.getElementById('main').addEventListener('click', function(e){ MouseEffects.generatePopAtCoordinates(e.clientX, e.clientY);
})
Mouse Effect - SVG Firework under click - Script Codes
Mouse Effect - SVG Firework under click - Script Codes
Home Page Home
Developer Matthew Chase
Username antishow
Uploaded September 24, 2022
Rating 3
Size 2,908 Kb
Views 52,624
Do you need developer help for Mouse Effect - SVG Firework under click?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matthew Chase (antishow) Script Codes
Name
Box Shadow Pixel Art Generator
THREE.js Starter Kit - Basic Sta--Fireflies
Quick Picross
Curvy Slider
THREE.js Starter Kit - Basic Stars
AnimationController
Sort Floated UL into columns
The Same Three Callouts You Always Do
THREE.js Starter Kit
Baby Birds - A Unity for WebGL Game
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!