😊

FontAwesomeに手書き風ノイズアニメーションを加える

2022/05/22に公開

Sass

SVG

アニメーション

tech

SVGのfilterを使って、FontAwesomeをアニメーションさせました。
HTMLとCSS（Sass）だけでできるので簡単です。
見出しやSNSのリンクなどに使ってます。

.html

<svg>
  <filter id="svg_filter_0">
    <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
    <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="4" />
  </filter>
  <filter id="svg_filter_1">
    <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" />
  </filter>
  <filter id="svg_filter_2">
    <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" />
  </filter>
  <filter id="svg_filter_3">
    <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
  </filter>
  <filter id="svg_filter_4">
    <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" />
  </filter>
</svg>
<div class="icon">
  <p>SNS ICON</p> 
  <i class="fab fa-twitter"></i>
  <i class="fab fa-facebook-f"></i>
  <i class="fab fa-instagram"></i>
</div>

.scss

svg {
  display: none;
}
.icon {
  animation: svg_filter 0.5s infinite;
  text-align: center;
  p{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: .5em;
  }
  i {
    font-size: 50px;
    width: 60px;
  }
}

@keyframes svg_filter {
  0% {
    filter: url("#svg_filter_0");
  }
  25% {
    filter: url("#svg_filter_1");
  }
  50% {
    filter: url("#svg_filter_2");
  }
  75% {
    filter: url("#svg_filter_3");
  }
  100% {
    filter: url("#svg_filter_4");
  }
}

FontAwesomeの使い方はこちら

Discussion