<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
.dashboard-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #000;
}
#animation-container {
position: relative;
width: 42px;
height: 38px;
z-index: 1;
top:0px;
}
.st0,
.st1,
.st2,
.st3 {
fill: #777774 !important;
stroke: #ffffff;
stroke-width: 0.25;
stroke-miterlimit: 10;
}
.raindrop {
width: 2px;
height: 2px;
background-color: #fff;
position: absolute;
transform-origin: center bottom;
z-index: 2;
animation: fall linear infinite;
}
.paused {
animation-play-state: paused;
}
.invisible {
visibility: hidden;
}
@keyframes fall {
to {
transform: translateY(6vh) translateX(3vh) rotate(80deg);
}
}
.round-button {
height: 50px;
width:50px;
border-radius: 50%;
border-style: solid;
border-width: 4px;
border-color: white;
color: white;
background-color: black ;
font-size: 18px;
position: absolute;
top: 10px; /* Regola la posizione in base alle tue esigenze */
left: 10px; /* Regola la posizione in base alle tue esigenze */
}
</style>
</head>
<body>
<div class="dashboard-container">
<div id="animation-container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 100" style="enable-background:new 0 0 80 100;"
xml:space="preserve">
<path class="st0" d="M9.7,87.8c-2.7-13.4,3.3-32,7.5-41.6C22,35,25.5,28.8,33.8,22c12.5-10.1,23.7-7.8,25.8-7.2
c1.3,0.4,7.6,2.5,6.8,10.8c-0.9,9.3-8.4,13-10.6,14.2c0,0-5.9,3-10.4,3.7c-7.3,1-11.4-3.2-11.4-3.2s-5.4,7.7-9.6,20.7
c-4.5,14.2-4.9,26.3-4.9,26.3L9.7,87.8z" />
<path class="st1" d="M34,40.3c0,0-1.8-0.9-2.5-4.5c0-0.2-0.9-3-2.1-2.4c-0.9,0.5-2.5,3.2-2.5,3.2s-6.5,9.4-10.9,25
c-2.3,8-3,25.7-3,25.7" />
<path class="st2" d="M34,40.1c-1.9-1.5-3.8-10.4,13.1-19.3c6.8-3.6,16.9-4.8,18.6-0.6" />
<path class="st1" d="M36.7,42.2c0,0-3.6-5.2,2.5-11.5c3-3,8.5-6.4,11.8-7.6c8.1-2.9,13.9-1.5,15.4,1.2" />
<path class="st1"
d="M46.8,43.3c0,0-6.3-1.7-2.8-7.6c1.4-2.3,5.9-5.5,8.5-6.6c5.1-2.2,7.1-1.5,8.9-0.5c2.5,1.4,2.2,4.8,2.2,4.8" />
<path class="st1" d="M49.9,42.2c0,0-4.1-1.9-3.5-4.4c0.5-2,4.2-4.6,6-5.5c1-0.5,3.2-2,6-0.9c1.8,0.7,1.8,2,1.8,2
c0.4,4.2-2.6,5.5-0.4,4" />
<circle class="st3" cx="44.8" cy="39.2" r="0.5" />
<circle class="st3" cx="45.7" cy="40.8" r="0.5" />
<circle class="st3" cx="47.1" cy="42" r="0.5" />
<circle class="st3" cx="45.2" cy="37.2" r="0.5" />
<circle class="st3" cx="46.3" cy="35" r="0.5" />
<circle class="st3" cx="48.4" cy="33.4" r="0.5" />
<circle class="st3" cx="50.6" cy="31.9" r="0.5" />
<circle class="st3" cx="52.9" cy="30.7" r="0.5" />
<circle class="st3" cx="55.3" cy="29.8" r="0.5" />
<circle class="st3" cx="57.8" cy="29.5" r="0.5" />
<circle class="st3" cx="60" cy="30.3" r="0.5" />
<circle class="st3" cx="61.4" cy="31.9" r="0.5" />
<circle class="st3" cx="61.7" cy="33.6" r="0.5" />
<ellipse class="st0" cx="37" cy="44" rx="1.3" ry="1.5" />
</svg>
</div>
<button class="round-button" onclick="toggleAnimation()" ng-click="send({payload:'30'})">30°</button>
<script>
function toggleAnimation() {
const raindrops = document.querySelectorAll('.raindrop');
raindrops.forEach(raindrop => {
raindrop.classList.toggle('paused');
raindrop.classList.toggle('invisible');
});
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
const animationContainer = document.getElementById('animation-container');
for (let i = 0; i < 100; i++) {
const raindrop = document.createElement('div');
raindrop.classList.add('raindrop');
raindrop.style.left = getRandomArbitrary(62, animationContainer.offsetWidth) + 'px';
raindrop.style.top = '40px';
raindrop.style.animationDuration = getRandomArbitrary(0.5, 5) + 's';
raindrop.style.animationDelay = getRandomArbitrary(0, 2) + 's';
animationContainer.appendChild(raindrop);
}
</script>
</div>
</body>
</html>
vorrei che un pulsante ui button emulasse il pulsante onclick per far partire o fermare l'animazione qualcuno ha qualche suggerimento .Grazie
[Edited by admin to fix code not posted correctly]
Thanks Marcus 
icon.
