Nice SVGs and CSS stuff I came across online

000_svg_css_TOC.md

SVG

Loaders

• Equalizer
• Gooey Balls
• Rectangles Wave
• Y-direction Wave

Backgrounds

• Moving Circles

• Moving Shapes

  _Preview

  preview here

Headers, Footers or Dividers

• Slurp
  _Preview

  
• Wave
  _Preview

  

TextEffects

• [Block Reveal]

---

CSS

TextEffects

• h1 3D effect
  _Preview

  

CSS_TextEffects_3D.svg

SVG_Background_MovingCircles.svg

SVG_Background_MovingShapes.svg

SVG_HeaderFooterDivider_Slurp.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(0, 10, 28, 0); display: block; z-index: 1; position: relative; shape-rendering: auto;" width="1667" height="100" preserveAspectRatio="xMidYMid" viewBox="0 0 1667 100">
<g transform="">
<defs>
  <linearGradient id="ldbk-photon-nq4q5u6dq7r-lg" x1="0" x2="1600.26" y1="0" y2="0" gradientUnits="userSpaceOnUse">
    <stop stop-color="#ff00ff" offset="0"/>
    <stop stop-color="#00ffff" offset="1"/>
  </linearGradient>
  <mask id="ldbk-photon-nq4q5u6dq7r-mask">
  <g><path d="M-300 -0.5 L1548.411815088645 -0.5 A10 10 0 0 1 1548.411815088645 20.5 L-300 20.5" fill="#fff" transform="translate(0.600487 0)">
  <animateTransform attributeName="transform" type="translate" dur="7s" repeatCount="indefinite" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" values="20;0;20" begin="0s"/>
</path><path d="M1505.277190481808 -0.5 L1528.411815088645 -0.5 A10 10 0 0 1 1528.411815088645 20.5 L1505.277190481808 20.5 A10 10 0 0 1 1505.277190481808 -0.5" fill="#fff" transform="translate(985.617 0)">
  <animateTransform attributeName="transform" type="translate" dur="7s" repeatCount="indefinite" keyTimes="0;1" values="0;2293.5201731434045" begin="0s"/>
  <animate attributeName="opacity" dur="7s" repeatCount="indefinite" keyTimes="0;0.3;1" values="1;1;0" begin="0s"/>
</path><path d="M-300 19.5 L1295.9519675252798 19.5 A10 10 0 0 0 1295.9519675252798 40.5 L-300 40.5" fill="#fff" transform="translate(1.33678 0)">
  <animateTransform attributeName="transform" type="translate" dur="5s" repeatCount="indefinite" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" values="20;0;20" begin="-6.000000000000001s"/>
</path><path d="M-50.69212492353904 19.5 L-19.999999999999996 19.5 A10 10 0 0 1 -19.999999999999996 40.5 L-50.69212492353904 40.5 A10 10 0 0 1 -50.69212492353904 19.5" fill="#000" transform="translate(462.58 0)">
  <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite" keyTimes="0;1" values="0;1537.7425833797638" begin="-6.000000000000001s"/>
  <animate attributeName="opacity" dur="10s" repeatCount="indefinite" keyTimes="0;0.3;1" values="1;1;0" begin="-6.000000000000001s"/>
</path><path d="M-300 39.5 L1407.6180327318543 39.5 A10 10 0 0 1 1407.6180327318543 60.5 L-300 60.5" fill="#fff" transform="translate(17.0825 0)">
  <animateTransform attributeName="transform" type="translate" dur="7s" repeatCount="indefinite" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" values="20;0;20" begin="-12.000000000000002s"/>
</path><path d="M1360.7766440948606 39.5 L1387.6180327318543 39.5 A10 10 0 0 1 1387.6180327318543 60.5 L1360.7766440948606 60.5 A10 10 0 0 1 1360.7766440948606 39.5" fill="#fff" transform="translate(1384.29 0)">
  <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite" keyTimes="0;1" values="0;1536.7009526562479" begin="-12.000000000000002s"/>
  <animate attributeName="opacity" dur="10s" repeatCount="indefinite" keyTimes="0;0.3;1" values="1;1;0" begin="-12.000000000000002s"/>
</path><path d="M-300 59.5 L1264.4006099636574 59.5 A10 10 0 0 0 1264.4006099636574 80.5 L-300 80.5" fill="#fff" transform="translate(19.9997 0)">
  <animateTransform attributeName="transform" type="translate" dur="5s" repeatCount="indefinite" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" values="20;0;20" begin="-18s"/>
</path><path d="M-46.5869488324803 59.5 L-19.999999999999996 59.5 A10 10 0 0 1 -19.999999999999996 80.5 L-46.5869488324803 80.5 A10 10 0 0 1 -46.5869488324803 59.5" fill="#000" transform="translate(819.129 0)">
  <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite" keyTimes="0;1" values="0;1635.5820117840617" begin="-18s"/>
  <animate attributeName="opacity" dur="10s" repeatCount="indefinite" keyTimes="0;0.3;1" values="1;1;0" begin="-18s"/>
</path><path d="M-300 79.5 L1340.9335126277247 79.5 A10 10 0 0 1 1340.9335126277247 100.5 L-300 100.5" fill="#fff" transform="translate(18.6868 0)">
  <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" values="20;0;20" begin="-24.000000000000004s"/>
</path><path d="M1289.6291732099921 79.5 L1320.9335126277247 79.5 A10 10 0 0 1 1320.9335126277247 100.5 L1289.6291732099921 100.5 A10 10 0 0 1 1289.6291732099921 79.5" fill="#fff" transform="translate(175.693 0)">
  <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite" keyTimes="0;1" values="0;1742.6803570772145" begin="-24.000000000000004s"/>
  <animate attributeName="opacity" dur="10s" repeatCount="indefinite" keyTimes="0;0.3;1" values="1;1;0" begin="-24.000000000000004s"/>
</path>    </g>
  </mask>
</defs>
<rect x="0" y="0" width="1667" height="100" fill="url(#ldbk-photon-nq4q5u6dq7r-lg)" mask="url(#ldbk-photon-nq4q5u6dq7r-mask)"/></g>
<style type="text/css">.lded &gt; .content, .lded &gt; .content &gt; .inner { height: 100%; }
.lded &gt; .content &gt; .inner &gt; .viewer { width: 100%; height: 100%; max-width: 100%; overflow: hidden }
.lded &gt; .content &gt; .inner &gt; .panel {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  opacity: 0.3;
}
.lded &gt; .content &gt; .inner &gt; .panel:hover { opacity: 1; }
.lded &gt; .content &gt; .inner &gt; .ctrl {
  position: absolute;
  bottom: 13px;
  left: 0;
  right: 0;
  margin: auto;
}
.lded &gt; .content &gt; .inner &gt; .ctrl:hover {
  z-index: 10;
}
#editor &gt; .inner &gt; .title {
  position: absolute;
  bottom: 195px;
  left: 0;
  right: 0;
  z-index: 11;
}
#editor &gt; .inner &gt; .title &gt; a:first-child {
  margin-left: 0!important;
#editor .lded .viewer { border-radius: 0 }

</style>

</svg>

SVG_HeaderFooterDivider_wave.svg

SVG_Loader_EqualizerWave.svg

SVG_Loader_GooeyBalls.svg

SVG_Loader_RectWave.svg

SVG_Loader_YRectWave.svg

SVG_TextEffects_BlockReveal.svg