prysm/svg/molecules/button-triple.svg

image
ฯ€ 0.0% 146 words ยท 1 min 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 96" width="720" height="96">
  <!-- 0-atoms/button/triple -->
  <defs>
    <linearGradient id="glow-r" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#00fe00" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#00fe00" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="glow-l" x1="1" y1="0" x2="0" y2="0">
      <stop offset="0%" stop-color="#00fe00" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#00fe00" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <!-- saber 1 -->
  <rect x="24" y="8" width="2" height="80" fill="#ffffff"/>
  <rect x="26" y="8" width="24" height="80" fill="url(#glow-r)"/>
  <!-- saber 2 -->
  <rect x="203" y="8" width="2" height="80" fill="#ffffff"/>
  <rect x="205" y="8" width="24" height="80" fill="url(#glow-r)"/>
  <rect x="179" y="8" width="24" height="80" fill="url(#glow-l)"/>
  <!-- saber 3 -->
  <rect x="383" y="8" width="2" height="80" fill="#ffffff"/>
  <rect x="385" y="8" width="24" height="80" fill="url(#glow-r)"/>
  <rect x="359" y="8" width="24" height="80" fill="url(#glow-l)"/>
  <!-- saber 4 -->
  <rect x="563" y="8" width="2" height="80" fill="#ffffff"/>
  <rect x="539" y="8" width="24" height="80" fill="url(#glow-l)"/>
  <!-- labels -->
  <text x="114" y="54" font-family="monospace" font-size="16" fill="#ffffff" text-anchor="middle">one</text>
  <text x="294" y="54" font-family="monospace" font-size="16" fill="#ffffff" text-anchor="middle">two</text>
  <text x="474" y="54" font-family="monospace" font-size="16" fill="#ffffff" text-anchor="middle">three</text>
</svg>

Neighbours