Skip to content

Instantly share code, notes, and snippets.

@nberlette

nberlette/README.md

Last active December 2, 2022 04:06
Show Gist options
  • Save nberlette/0a4615940b55eb27df419d203f1cdbbb to your computer and use it in GitHub Desktop.
Save nberlette/0a4615940b55eb27df419d203f1cdbbb to your computer and use it in GitHub Desktop.
Download ZIP
Animated SVG 😎
Raw
README.md

Animated SVG 😎

No JavaScript. No CSS. Pure SVG Animations.

Display the source blob
Display the rendered blob
Raw
raindrops.svg
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" role="img" id="raindrops-animated">
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="950" y1="-31" x2="450" y2="969">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="16" y1="-192" x2="-484" y2="808">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="1121" y1="-121" x2="621" y2="879">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="358" y1="-35" x2="-142" y2="965">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="741" y1="-102" x2="241" y2="898">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="219" y1="-14" x2="-281" y2="986">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="420" y1="-110" x2="-80" y2="890">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="843" y1="-200" x2="343" y2="800">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="133" y1="-14" x2="-367" y2="986">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="41" y1="-31" x2="-459" y2="969">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="164" y1="-45" x2="-336" y2="955">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="377" y1="-4" x2="-123" y2="996">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="994" y1="-183" x2="494" y2="817">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="4s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="1162" y1="-84" x2="662" y2="916">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="135" y1="-182" x2="-365" y2="818">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="5s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="155" y1="-118" x2="-345" y2="882">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="175" y1="-11" x2="-325" y2="989">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="1096" y1="-119" x2="596" y2="881">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="5s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="255" y1="-198" x2="-245" y2="802">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="881" y1="-23" x2="381" y2="977">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="544" y1="-6" x2="44" y2="994">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="7s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="832" y1="-15" x2="332" y2="985">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="536" y1="-62" x2="36" y2="938">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="5s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="961" y1="-26" x2="461" y2="974">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="597" y1="-171" x2="97" y2="829">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="545" y1="-12" x2="45" y2="988">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="1190" y1="-129" x2="690" y2="871">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="2s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="239" y1="-95" x2="-261" y2="905">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="325" y1="-149" x2="-175" y2="851">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="298" y1="-123" x2="-202" y2="877">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="480px" stroke="rgba(210,210,210,0.3)" x1="1103" y1="-282" x2="473" y2="918">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="4s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="1003" y1="-282" x2="373" y2="918">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="1203" y1="-282" x2="573" y2="918">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="1403" y1="-282" x2="803" y2="918">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="2s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="723" y1="-127" x2="223" y2="873">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3.3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="486" y1="-62" x2="-14" y2="938">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="4s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="1066" y1="-3" x2="566" y2="997">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="551" y1="-138" x2="51" y2="862">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<g transform="translate(-100,-200) scale(4, 3) translate(-300, 0)" opacity="0.5" filter="blur(6px)" id="group2">
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="545" y1="-12" x2="45" y2="988">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="1190" y1="-129" x2="690" y2="871">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="239" y1="-95" x2="-261" y2="905">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="325" y1="-149" x2="-175" y2="851">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="298" y1="-123" x2="-202" y2="877">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="1073" y1="-82" x2="573" y2="918">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="723" y1="-127" x2="223" y2="873">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="486" y1="-62" x2="-14" y2="938">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="1066" y1="-3" x2="566" y2="997">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
<line stroke-width="7px" stroke-linecap="round" stroke-dasharray="40px 200px" stroke-dashoffset="240px" stroke="rgba(210,210,210,0.3)" x1="551" y1="-138" x2="51" y2="862">
<animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="3s" calcMode="linear" repeatCount="indefinite" />
</line>
</g>
<style>
#group2 > line {
stroke-width: 14px !important;
}
</style>
</svg>
Display the source blob
Display the rendered blob
Raw
test.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment