Is it possible to apply light sweep effect only on the SVG logo?
The light sweep effect is triggered when hovering over the logo
The effect should be limited to the path inside the SVG image
.preloader {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: linear-gradient(119.5deg, #242524 1.62%, #5B5B5B 90.13%);
}
.logo {
display: none;
}
.sp {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 60%;
height: 70px;
}
.sp:after {
content: '';
width: 50px;
height: 900px;
position: absolute;
background-color: #ffffff45;
top: 0;
transition: all 1s ease-in-out;
transform: rotate(135deg) translate(400px, 400px);
}
.sp:hover:after {
transform: rotate(135deg) translate(-600px, -200px);
}<div class="preloader">
<span class="sp">
<svg xmlns="http://www.w3.org/2000/svg" width="764" height="65" viewBox="0 0 764 65" fill="none">
<path
d="M21.1662 3.6928C32.3348 3.6928 36.8384 15.5809 36.8384 15.5809H37.9191C37.9191 15.5809 42.6929 11.7984 42.6929 5.58383C42.6929 5.58383 36.9283 0 22.8776 0C8.55619 0 1.35087 5.67423 1.35087 15.8511C1.35087 25.127 7.20536 29.09 19.4547 35.6645C29.5426 41.1578 36.5677 44.5804 36.5677 51.1544C36.5677 57.0083 31.2541 60.791 23.8684 60.791C12.2493 60.791 6.03421 47.8222 6.03421 47.8222H4.86366C4.86366 47.8222 0 51.4251 0 57.6391C0 57.6391 6.30439 64.4837 22.6973 64.4837C38.3696 64.4837 45.484...
</span>
</div>