Ledstrip

by PhilQ

HTML

<svg viewBox="0 0 175 35" id="ledstrip">
  <defs>
    <linearGradient id="copper" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(216, 132, 90);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(223, 158, 118);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(216, 132, 90);stop-opacity:1" />
    </linearGradient>
  </defs>

  <style>
    .text {
      fill: #000000;
      stroke: none;
      font: 8px Arial;
      font-weight: bold;
    }
  </style>

  <g id="strip">
    <g id="connection1" transform="translate(-10,0)">
      <rect x="0" y="4"
            height="9" width="20"
            rx="4.5" ry="4.5" fill="url(#copper)" />
      <rect x="0" y="22"
            height="9" width="20"
            rx="4.5" ry="4.5" fill="url(#copper)" />
      <line x1="10" y1="0" x2="10" y2="35" stroke="black" stroke-width="0.5" />
    </g>
    <g id="polars1" transform="translate(13,0)">
      <line x1="0" x2="5" y1="5" y2="5" stroke="black" stroke-width="1" />
      <line x1="2.5" x2="2.5" y1="2.5" y2="7.5" stroke="black" stroke-width="1" />
      <line x1="0" x2="5" y1="30" y2="30" stroke="black" stroke-width="1" />
    </g>
    <g id="led1" transform="translate(23.1667,0)">
      <rect x="1" y="4"
            height="27" width="11"
            rx="5" ry="2.5" fill="#CCCCCC" />
      <rect x="0" y="6.2"
            height="22.6" width="13"
            fill="#eeeeee" />
      <rect x="0.5" y="6.7"
            height="21.6" width="12"
            fill="#ffffff" />
      <rect x="1.5" y="7.7"
            height="19.6" width="10"
            fill="#F9F776" />
    </g>
    <g id="resistor" transform="translate(50.83335,0)">
      <path d="M1 14.5 v-9.5 h14 v9.5" fill="none" stroke="black" stroke-width="1" />
      <path d="M4 12
               a4,4 0 0 1 4,-4
               a4,4 0 0 1 4,4
               a2,3 0 0 1 -2,3
               h-4
               a2,3 0 0 1 -2,-3"
            fill="#CCCCCC" />
      <path...

CSS

svg {
  font-family:arial;
  /* border: 1px solid #f00; */
}

div {
  width: 100%;
  height: 100px;
  overflow: hidden;
}