SVG siren CSS animation

Question

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

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>

score 1 · Answer 1 · answered Nov 03 '17 at 04:43

I think you want to like this:

svg {
  height: 200px;
}

#siren {
  animation: color-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;
  }
}
@keyframes color-flash {
  0% {
    fill: white;
  }
  50% {
    fill: red;
  }
  100% {
    fill: yellow;
  }
}

<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>

Thanks. Though the animation coming off the siren (dashes/lines) is incorrect. There should only be ONE dash — Jeremy Lynch, Nov 03 '17 at 05:14

Paul LeBeau · Accepted Answer · 2017-11-03T13:54:32.153

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>

Thank you so much! just the answer I was looking for ! – Jeremy Lynch Nov 03 '17 at 12:29 — Jeremy Lynch, Nov 03 '17 at 12:29

SVG siren CSS animation

2 Answers2