{"version":"1.0","provider_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","provider_url":"https:\/\/fatihsoysal.com\/blog","author_name":"Fatih Soysal","author_url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/","title":"Framer Motion ile SVG Path'i Kayd\u0131rma","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"jSEGAMH62n\"><a href=\"https:\/\/fatihsoysal.com\/blog\/framer-motion-ile-svg-pathi-kaydirma\/\">Framer Motion ile SVG Path&#8217;i Kayd\u0131rma<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/fatihsoysal.com\/blog\/framer-motion-ile-svg-pathi-kaydirma\/embed\/#?secret=jSEGAMH62n\" width=\"600\" height=\"338\" title=\"&#8220;Framer Motion ile SVG Path&#8217;i Kayd\u0131rma&#8221; &#8212; Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" data-secret=\"jSEGAMH62n\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script>\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n<\/script>\n","description":"Bu makalede, Framer Motion k\u00fct\u00fcphanesini kullanarak SVG path'leri boyunca animasyonlu kayd\u0131rma i\u015flemlerini nas\u0131l ger\u00e7ekle\u015ftirece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. \u00d6ncelikle, SVG path'lerinin ne oldu\u011funu ve neden bunlar\u0131 animasyonlu hale getirmenin \u00f6nemli oldu\u011funu a\u00e7\u0131klayaca\u011f\u0131z. Ard\u0131ndan, Framer Motion'\u0131n sundu\u011fu olanaklar\u0131 ve bu animasyonlar\u0131 olu\u015fturmak i\u00e7in gereken ad\u0131mlar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Son olarak, birka\u00e7 pratik \u00f6rnek ve ipu\u00e7lar\u0131 payla\u015faca\u011f\u0131z. Bu y\u00f6ntem, web sitenize etkileyici ve ak\u0131c\u0131 animasyonlar eklemenizi sa\u011flayacakt\u0131r. Daha dinamik ve ilgi \u00e7ekici bir kullan\u0131c\u0131 deneyimi sunmak isteyen geli\u015ftiriciler i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr."}