svg animated line testing - shooting star right [ svg ] - KruXoR

svg

svg animated line testing - shooting star right

Posted in svg

7895

8:46 am, February 17, 2022

svg animated line testing - shooting star right

I found this on a random site i was looking at it took me a while to extract the animation, but i found it and its working below.

There is shoot right and also shoot left, if you are that way inclined.

Looks cool you could add it as a nice animation underline or something similar.

the left animated one is a bit broken, you could probably just rotate the element 180 and the use the same animation and it would go the other way, or move the svg over to the right so it animates to the left.

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="2840" height="2" viewBox="0 0 2840 2" fill="none" class="relative">
<path d="M-15 1H2855" stroke="white" stroke-opacity="0.15" stroke-linejoin="round" stroke-dasharray="1 5"></path>
<path d="M0 1H33" stroke="url(#footer_grad)" stroke-dashoffset="0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" id="footer-shoot"></path>
<defs>
  <linearGradient id="footer_grad" x1="0" y1="2" x2="33" y2="2" gradientUnits="userSpaceOnUse">
    <stop offset="5%" stop-color="#61CDEF" stop-opacity="0"></stop>
    <stop offset="95%" stop-color="#61CDEF"></stop>
  </linearGradient>
</defs>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" width="2840" height="2" viewBox="0 0 2840 2" fill="none" class="relative">
<path d="M-15 1H2855" stroke="white" stroke-opacity="0.15" stroke-linejoin="round" stroke-dasharray="1 5"></path>
<path d="M0 1H33" stroke="url(#footer_grad)" stroke-dashoffset="0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" id="footer-shoot-left"></path>
<defs>
  <linearGradient id="footer_grad" x1="0" y1="2" x2="33" y2="2" gradientUnits="userSpaceOnUse">
    <stop offset="95%" stop-color="#61CDEF" stop-opacity="0"></stop>
    <stop offset="5%" stop-color="#61CDEF"></stop>
  </linearGradient>
</defs>
</svg>

CSS

#footer-shoot {
    -webkit-animation: shoot-right 3s ease-in-out infinite;
    animation: shoot-right 3s ease-in-out infinite;
}
#footer-shoot-left {
      -webkit-animation: shoot-left 3s ease-in-out infinite;
    animation: shoot-left 3s ease-in-out infinite;
}
@keyframes shoot-right{0%{stroke-dashoffset:450;opacity:1;transform:translateZ(0)}to{stroke-dashoffset:0;opacity:1;transform:translate3D(100%,0,0)}}

@keyframes shoot-left{0%{stroke-dashoffset:450;opacity:.25;transform:translateZ(0)}to{stroke-dashoffset:0;opacity:1;transform:translate3D(-100%,0,0)}}

Posted in svg

7895

8:46 am, February 17, 2022

View Statistics

This Week

165

This Month

652

This Year

2150

No Items Found.

Add Comment

Other Items in svg

green circle tick svg svg animated line testing - shooting star right chevron right thick and pointy edges base64 down chevron and styles globe svg testing (broken) mouse outline svg chevron up chevron down chevron left chevron right download icon svg

Related Search Terms

svg lineargradient 8

svg probably 76

svg gradient 80

svg Gradient 86

svg shooting 69

svg Probably 88

svg Testing 109

svg Shooting 74

svg something 97

svg animation 103

svg Animation 97

svg animated 86

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...