のアニメーションネオンサインを作成する

今日はSVGを使ってアニメーションのネオンサインを作成する方法を教えていきます.
まず、SVGを取得する必要があります.この場合、popper.
使用するThe Noun Project , あなたは無料で使用できるSVGSの大きなコレクションです.Here's the SVG I used.
今、私たちは、SVGを持って、それを輝きましょう!
私たちは、ポッパーの複製を作成し、ポッパーの後ろにそれを置くと、それをぼかします.
以下に例を示します:
つの手順に分けてみましょう.
まず、SVGを作成する<filter> 「グローレッド」のIDで.

<svg>
  <defs>
      <filter id="glow-red" height="122%"></filter>
  </defs>
</svg>

第二に、我々はフィルタを定義し、それを使用してぼかしを言って<feGaussianBlur> , との変化のぼかし半径stdDeviation プロパティ.

<feGaussianBlur stdDeviation="5"> 

また、位置を制御する追加のプロパティを追加しますdx , dy プロパティと色(flood-color ) ぼかしの

<feOffset in="blur" dx="0" dy="0" result="offsetBlur">
<feOffset dx="1" dy="1" result="offsetblur">

<feFlood flood-color="red" result="offsetColor">

最後に、我々はPopperの複製を作成します<use> 要素、およびフィルタを適用します.

<use xlink:href="#popper" filter="url(#glow-red)">

ここでは、我々がこれまで持っているものです:

<svg viewBox="0 0 125 120">
    <defs>
      <filter id="glow-red" height="122%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur> 
        <feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
        <feOffset dx="1" dy="1" result="offsetblur"></feOffset>
        <feFlood flood-color="red" flood-opacity="1" result="offsetColor"></feFlood>
        <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"></feComposite>
      </filter>
    </defs>
    <use xlink:href="#popper" filter="url(#glow-red)"></use>
    <path d="M24.781,52.447c0.309,-0.79 2.349,-2.784 2.806,-3.238c3.362,-3.362 8.003,-5.137 13.426,-5.137c8.656,0 18.409,4.588 26.098,12.276c13.083,13.082 16.22,30.443 7.139,39.524c-2.414,2.414 -5.499,3.996 -9.05,4.704l-60.453,19.062c-0.36,0.115 -0.731,0.169 -1.098,0.169c-0.994,0 -1.966,-0.409 -2.668,-1.159c-0.961,-1.028 -1.242,-2.515 -0.727,-3.825l24.527,-62.376Zm37.17,9.06c-6.347,-6.347 -14.175,-10.138 -20.936,-10.138c-2.401,0 -5.785,0.52 -8.264,2.999c-5.981,5.981 -2.711,19.355 7.139,29.203c6.347,6.347 14.175,10.138 20.936,10.138c0.779,0 1.665,-0.065 2.586,-0.225l2.182,-0.688c0.187,-0.059 0.376,-0.088 0.563,-0.117c1.035,-0.452 2.043,-1.082 2.934,-1.973c5.978,-5.974 2.709,-19.348 -7.14,-29.199Zm-13.473,36.689c-4.853,-2.111 -9.605,-5.315 -13.752,-9.461c-4.806,-4.806 -8.257,-10.191 -10.266,-15.53l-14.616,37.175l38.634,-12.184Z" id="popper" class="popper"></path>
</svg>

現在、我々は我々の輝きを持ちます.しかし、我々はそれだけで本当のネオン記号と同じように、フリッカーにしたいですか?
CSSアニメーションを使用することができます.デモを行います.
我々は、各ポッパーアニメーションを一定の時間に表示されている.
最初のポパーは、アニメーションの3分の1(33 %)で表示され、2番目のポップパーは3分の2で表示されます.
以下にCSSで書いてみましょう.

@keyframes first-popper-appear {
  0%, 33.33% {
    opacity: 1;
  }
  33.99%, to {
    opacity: .1;
  }
}

/* And so on... */

出来上がった結果
良いものを持ってください!