SVG Çizgi Animasyonları: stroke-dasharray Sırrı

Web sitelerinde bir logonun veya ikonun sanki görünmez bir kalemle ekrana çizildiğini görmüşsünüzdür. Bu büyüleyici etkinin arkasında sadece iki CSS özelliği yatar: stroke-dasharray ve stroke-dashoffset.

Çizim Tekniğinin Mantığı

1. pathLength veya getTotalLength() ile çizginin toplam uzunluğunu belirleyin (örn: 1000px).
2. stroke-dasharray: 1000; vererek çizgi ve boşluk uzunluğunu eşitlersiniz.
3. stroke-dashoffset: 1000; ile çizgiyi tamamen çerçevenin dışına kaydırıp görünmez yaparsınız.
4. CSS veya Framer Motion ile stroke-dashoffset: 0; değerine animasyon verdiğinizde çizgi akarak belirir!

.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}