Skip to content

Instantly share code, notes, and snippets.

@softmarshmallow

softmarshmallow/diagonal-stripe-pattern.svg

Created August 2, 2025 08:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save softmarshmallow/16f4b0ff551cbe0fed3d888dc3781493 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save softmarshmallow/16f4b0ff551cbe0fed3d888dc3781493 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
diagonal-stripe-pattern.svg
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="10" height="4" patternTransform="rotate(45)">
<rect width="2" height="4" fill="skyblue" />
</pattern>
</defs>
<path fill="url(#diagonalStripes)" stroke="black">
<animate attributeName="d" dur="3s" repeatCount="indefinite"
values="
M50,150 L150,150 L100,50 Z;
M100,100 L200,100 L150,200 Z;
M50,150 L150,150 L100,50 Z
" />
</path>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment