ساخت قلب تپنده در سایت شما با استفاده از SVG

این روز‌ها مد شده پایین هر وب‌سایتی یک قلب اضافه کنیم و مثلا بنویسیم: ساخته شده با ❤️ به دست رضا راد 🙂 بد هم نیست. شاید خودمون هم به میهن وردپرس اضافه کردیم.

زیباست. اما چون شکلک روی همه سیستم‌ها اجرا نمی‌شود و از سمت دیگه استفاده از تصویر برای انجام چنین کار خلاقانه‌ای هم عملا کند کردن سرعت سایت شماست، قصد داریم این کار را با استفاده از SVG انجام بدیم. همان Scalable Vector Graphics که قبلا در دوره صفر تا صد طراحی سایت در موردش صحبت کردیم. اگر اطلاع ندارید مقاله ما درباره SVG را بخونید.

اگر مقاله را خونده باشید متوجه شدید که با استفاده از SVG می‌توانید فایل‌هایی با کیفیت بسیار بالا، ساده و شیک و با حجم بسیار کم تولید کنید. حالا قصد داریم با استفاده از SVG یک قلب تپنده زیبا در وردپرس بسازیم. به این شکل:

اگر دوست دارید شگفت زده شوید، باید عرض کنم که این انیمیشن تنها با استفاده از HTML ساخته شده. پس بریم که بسازیمش.

اول یک آیکون قلب بسازیم

قبل از هر چیزی باید یک آیکون قلب داشته باشیم تا بتونیم آن را تپنده کنیم. پس بریم برای ساخت ایکون قلب در SVG

ساخت آیکون باید با استفاده از نرم افزار adobe illustrator انجام شود و اگر بخوام این کار را به شما آموزش بدم. نیاز به یک دوره چند ساعته برای انجام اینکار است. پس اینبار اجازه دهید به جای ماهی گیری، به شما ماهی بدم. 🙂 از انتهای همین صفحه آیکون قلب را دانلود کنید.

فایلی که دانلود کردید را باز کنید و فایل heart.svg را با استفاده از نرم افزار ویرایش متن، مثلا Atom باز کنید.

حالا این فایل را داشته باشید تا بعدا بریم سراغش.

در نرم‌افزار ویرایش کد، مثلا همان Atom یک فایل جدید باز کنید. شروع کنیم به نوشتن کد‌هایی برای ساخت فایل SVG. پس این کد را داخلش قرار دهید:

<svg width="100" height="100" viewBox="0 0 100 100">
   
</svg>

در عبارت بالا می‌توانید عدد ۱۰۰ را به هر عددی که قصد دارید سایز آیکون شما باشد تغییر دهید. فقط دقت داشته باشید که اندازه آیکون شما با اندازه این SVG یکی باشد.

حالا اگر قصد دارید رنگ پس زمینه SVG شما هم با رنگ قالب یکی باشد پس باید این کد را به سی اس اس اضافه کنید.

svg {
  background: blue;
}

کد بالا اعلام کرد که رنگ پس زمینه ما آبی باشد.

حالا Path قلب را اضافه کنید.

قلبی که در atom باز کردید را ببینید. در این فایل یک مقدار path مشخص شده با یک مقدار d که مقدار d مسیر نمایش path را به مرورگر اعلام می‌کند. شما باید این مقدار را بصورت زیر بین svg در فایل جدیدی که ایجاد کردید، قرار دهید.

<path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0
	c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"/>

در کد بالا مقدار fill به شما رنگ قلب را اعلام می‌کند. مثلا tomato یه رنگی در حدود گوجه‌فرنگی را به شما اعلام می‌کند (که با توجه به قیمت فعلی گوجه فرنگی، رنگ بسیار زیبا و لاکچری هم است. 🙂 )

پس تا اینجا نتیجه کار ما شد این کد:

<svg width="100" height="100" viewBox="0 0 100 100">
  <path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
</svg>

که به این شکل نمایش داده خواهد شد:

قلب بزرگتر می‌خواید؟

می‌خواید قلب بزرگتر باشد؟ پس فایل svg را با ادوبی ایلاستریتر ویرایش کنید و یک فایل svg بزرگتر بسازید. سپس اعداد ۱۰۰ را به عدد دلخواه خود تغییر دهید. به همین راحتی!

زنده کردن قلب!

حالا میرسیم به قسمت جالب کار. می‌خوایم قلب را تپنده کنیم. پس بریم برای ایجاد یک قلب تپنده و نمایش آن در سایتمون.

برای متحرک کردن قلب باید کد زیر را بعد از path اضافه کنیم. قبل از بسته شدن تگ svg در فایل بالا. به این شکل:

<svg width="100" height="100" viewBox="0 0 100 100">
  <path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
<animateTransform
      attributeName="transform"
      type="scale"
      dur="1s"
      values="1; 1.5; 1.25; 1.5; 1.5; 1;"
      repeatCount="indefinite">
</animateTransform>
</svg>

در کد بالا با استفاده از animateTransform اعلام کردیم که هر ۱ ثانیه، قلب ما به میزان ۱.۵ برابر بزرگتر شود. می‌توانید اعداد بالا را به هر مقداری که دوست دارید تغییر دهید. مثلا در پیش نمایش زیر، این عدد را به 0.5 ثانیه تغییر میدم تا نتیجه را ببینید:

به همین راحتی یک قلب تپنده ایجاد شد. فقط کافیه کد بالا را بصورت یک فایل SVG ذخیره کنید و با img در سایت‌تون نمایش دهید و یا مستقیما کد را به HTML سایت خود اضافه کنید و لذتش را ببرید. 🙂

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...