Search code examples
csssvgsvg-animatepure-css

SVG siren CSS animation

I am trying to replicate this siren in an SVG animation.

enter image description here

Here is what I have created: 

svg {
  height: 200px;
}

#siren {
  animation: flash 1s linear infinite;
}

#line1, #line2, #line3 {
  stroke-dasharray: 10;
  animation: line-dash 1s forwards infinite;
}

@keyframes line-dash {
  0% {
    stroke-dashoffset: 46;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flash {
	to {
    fill: white;
  }
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 98.48">
  <title>siren</title>
  <g id="_32b192a6-4f40-44d1-9e98-565e0c30a65b" data-name="32b192a6-4f40-44d1-9e98-565e0c30a65b">
    <g id="ef66adc2-a9a5-4b4a-830b-37ffb06635fc">
      <path id="siren" d="M342.14,70.62h2.42a16,16,0,0,1,16,16V104H326.14V86.62A16,16,0,0,1,342.14,70.62Z" transform="translate(-290.79 -11.71)" fill="#f15d44" stroke="#42404d" stroke-miterlimit="10" stroke-width="2"/>
      <rect x="25.67" y="88.75" width="53.78" height="9.73" fill="#f1f2f2"/>
    </g>
  </g>
  <line id="line2" x1="52.56" y1="46.6" x2="52.56" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line3" x1="68.2" y1="51.13" x2="101.15" y2="18.19" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line1" x1="36.48" y1="52.32" x2="3.54" y2="19.37" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
</svg>

Solution

  • A dash array with one value like yours

    stroke-dasharray: 10;

    is actually a shortcut for:

    stroke-dasharray: 10 10;

    Which means that the dash pattern consists of a dash of length 10 followed by a gap of length 10. It then repeats dash 10, gap 10, dash 10, gap 10, etc.

    If you want a single short dash, then a big gap, you need to add an appropriate gap value into the dash pattern. For example:

    stroke-dasharray: 10 40;


    svg {
  height: 200px;
}

#siren {
  animation: flash 1s linear infinite;
}

#line1, #line2, #line3 {
  stroke-dasharray: 10 40;
  animation: line-dash 1s forwards infinite;
}

@keyframes line-dash {
  0% {
    stroke-dashoffset: 46;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flash {
  to {
    fill: white;
  }
}
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 98.48">
  <title>siren</title>
  <g id="_32b192a6-4f40-44d1-9e98-565e0c30a65b" data-name="32b192a6-4f40-44d1-9e98-565e0c30a65b">
    <g id="ef66adc2-a9a5-4b4a-830b-37ffb06635fc">
      <path id="siren" d="M342.14,70.62h2.42a16,16,0,0,1,16,16V104H326.14V86.62A16,16,0,0,1,342.14,70.62Z" transform="translate(-290.79 -11.71)" fill="#f15d44" stroke="#42404d" stroke-miterlimit="10" stroke-width="2"/>
      <rect x="25.67" y="88.75" width="53.78" height="9.73" fill="#f1f2f2"/>
    </g>
  </g>
  <line id="line2" x1="52.56" y1="46.6" x2="52.56" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line3" x1="68.2" y1="51.13" x2="101.15" y2="18.19" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line1" x1="36.48" y1="52.32" x2="3.54" y2="19.37" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
</svg>