SVG ile Yapışkan Şekiller

Birbirine yaklaştığında yapışma etkisi gösteren SVG’ler nasıl oluşturulur? Bu yazıda bunu mümkün olduğunca basit biçimde anlatacağız. Amaç, örneği birebir kopyalamanız değil, bunu yapmanıza yardımcı olacak bir yaklaşım öğrenmeniz. Teknik adımları ezberlemek yerine böyle bir sonucu nasıl elde edebileceğinizi anlamaya çalışın. Yapışma etkisini daha iyi gözlemlemek için şekilleri sürükleyebilirsiniz.

Önce kavramı ve ne yapmamız gerektiğini anlamak için basit bir örnek çiziyoruz. Böylece bu etki için hangi verilere ihtiyacımız olduğunu ve bunları nasıl elde edeceğimizi belirleyebiliriz. Aşağıdaki çizimde görüldüğü gibi yapışma etkisi için dört noktaya ve bunların koordinatlarına ihtiyacımız var.

• a: (S1.x + S1.width, S1.height * 0.25 + S1.y)
• b: (S2.x,S2.height * 0.25 + S2.y)
• c: (S2.x,S2.height * 0.75 + S2.y)
• d: (S1.x + S1.width, S1.height * 0.75 + S1.y)

Ardından bu noktaları birleştiren bir yol oluşturmak için SVG Path komutlarını kullanacağız. Bunun için Move, Line ve Arc komutlarına ihtiyacımız var. Bu komutlara aşina değilseniz SVG Path Komutları yazısına bakabilirsiniz.

a: (119, 105)
b: (181, 160)
d: (119, 155)
c: (181, 200)

Bulduğumuz değerleri kullanarak iki şeklin arasındaki esnek şekli oluşturabiliriz. Değerleri şekillerin konumlarına göre sürekli güncellersek şekilleri sürüklediğimizde aradaki esnek şeklin de güncellendiğini görürüz.

@aykutkardas