Анимация знака радиационной безопасности

#javascript #html #css #css3 #svg

Мне необходимо анимировать знак радиационной безопасности. 
Анимация должна быть реализована с помощью прорисовки контуров знака с последующим
заполнением цветом. 

Для анимации я перерисовал картинку знака в формате *.png  в формат *.svg. 

Ниже код: 








Для реализации анимации допустимы:  анимации css3, smil svg, Javascript

Очень хотелось бы получить несколько ответов, с разнообразными техниками выполнения.
    

Ответы

Ответ 1

Вариант с 

Первый шаг:

Сначала узнаем длину stroke:




После поместим в каждый патч stroke-dashoffset & stroke-dasharray

Второй шаг:

Далее делаем сам  внутри  & :




Анимация закрашивания:
P.S. Будет срабатывать только тогда, когда первая анимация закончится, begin="strokeTap.end"




Третий шаг:

Также поместим  в :







* {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

  



Ответ 2

Вариант на CSS:



* {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainCircle {
  fill: #fff;
  stroke: black;
  stroke-dashoffset: 1424;
  stroke-dasharray: 1424;
  animation: main-circle 2s cubic-bezier(0.6, 0.05, 0.795, 0.035) forwards;
}

#sector {
  fill: #fff;
  stroke-dashoffset: 1467;
  stroke-dasharray: 1467;
  animation: stroke 4s cubic-bezier(0.95, 0.05, 0.795, 0.035) forwards;
}

#smallCircle {
  fill: #fff;
  stroke-dashoffset: 356;
  stroke-dasharray: 356;
  animation: stroke-small 4s cubic-bezier(0.95, 0.05, 0.795, 0.035) forwards;
}

@keyframes main-circle {
  to {
    fill: #F8F73F;
    stroke-dashoffset: 0;
  }
}

@keyframes stroke {
  from {
    stroke-dashoffset: 1467;
  }
  to {
    fill: black;
    stroke-dashoffset: 0;
  }
}

@keyframes stroke-small {
  from {
    stroke-dashoffset: 356;
  }
  to {
    fill: black;
    stroke-dashoffset: 0;
  }
}