Skip to content

Instantly share code, notes, and snippets.

@TheNotary
Last active September 9, 2025 13:56
Show Gist options
  • Select an option

  • Save TheNotary/82cb9a79ee0f2b90887c57c2c24a38e8 to your computer and use it in GitHub Desktop.

Select an option

Save TheNotary/82cb9a79ee0f2b90887c57c2c24a38e8 to your computer and use it in GitHub Desktop.
A Beautiful SVG Ruby
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="244" height="220"
viewBox="58 0 244 220"
role="img" aria-label="Red gemstone composed of adjacent triangles">
<!-- #################### -->
<!-- background for debug -->
<!-- #################### -->
<rect x="58" y="0" width="100%" height="100%" opacity="0"/>
<!-- ################################ -->
<!-- top row triangles (left → right) -->
<!-- ################################ -->
<!-- Triangle 1: p0 - p1 - p2 (points upward) -->
<polygon points="60,70 120,2 130,70"
fill="#ff9a9a" stroke="#999" stroke-width="1"/>
<!-- Triangle 2: p1 - p2 - p3 (points downward) -->
<polygon points="120,2 130,70 180,2"
fill="#f37b7b" stroke="#999" stroke-width="1"/>
<!-- Triangle 3 (middle, isosceles with base slightly longer bottom) -->
<polygon points="130,70 180,2 230,70"
fill="#ff9a9a" stroke="#999" stroke-width="1"/>
<!-- Triangle 4: p3 - p4 - p5 (points downward) -->
<polygon points="180,2 230,70 240,2"
fill="#f37b7b" stroke="#999" stroke-width="1"/>
<!-- Triangle 5: p4 - p5 - p6 (points upward) -->
<polygon points="230,70 240,2 300,70"
fill="#ffb0b0" stroke="#999" stroke-width="1"/>
<!-- #################### -->
<!-- bottom row triangles -->
<!-- #################### -->
<!-- Bottom left: p0 - p2 - B -->
<polygon points="60,70 130,70 180,218"
fill="#ff8080" stroke="#999" stroke-width="1"/>
<!-- Bottom middle (isosceles): p2 - p4 - B -->
<polygon points="130,70 230,70 180,218"
fill="#e95f5f" stroke="#999" stroke-width="1"/>
<!-- Bottom right: p4 - p6 - B -->
<polygon points="230,70 300,70 180,218"
fill="#ffa0a0" stroke="#999" stroke-width="1"/>
<!-- outer contour -->
<path d="M60,70 L120,2 L180,2 L240,2 L300,70 L180,218 Z"
fill="none" stroke="#999" stroke-width="2" opacity="1"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment