Web tasarımlarınız için organik, akışkan CSS border-radius blob şekilleri ve SVG kodları üretin.
Modern web tasarımında (UI/UX) keskin kare ve dairesel kutuların soğukluğunu kırmak, arka planlara derinlik katmak, portre fotoğraflarını çerçevelemek ve butonlara canlılık kazandırmak için organik akışkan şekiller (blob) vazgeçilmez bir trend haline gelmiştir. Standart bir CSS kuralında köşelere tek bir yarıçap verilerek basit daireler yapılırken; gelişmiş 8 yönlü border-radius sözdizimi her köşenin yatay ve dikey eğrilik yarıçaplarını birbirinden bağımsız olarak bükerek doğadaki su damlalarına benzeyen estetik organik formlar üretir.
Örneğin bir web tasarımcısının yeni bir kahraman (hero) bölümü için arka planda yavaşça dalgalanan organik bir sıvı şekline ihtiyaç duyduğunu varsayalım. Kullanıcı araca girip karmaşıklık sürgüsünü ayarlar veya 'Rastgele Blob Üret' butonuna tıklar. Algoritma anında matematiksel olarak dengeli border-radius: 42% 58% 70% 30% / 45% 45% 55% 55% CSS kodunu ve pürüzsüz kübik Bezier eğrilerinden oluşan SVG d='M...' yolunu sentezler. Tasarımcı tek tıkla CSS kodunu kopyalayabilir veya sitenin arka planında yavaşça dönüp şekil değiştiren akışkan keyframe animasyon kodunu projesine ekleyebilir.
Tüm Bezier eğrisi hesaplamaları, SVG yol üretimi ve CSS kod sentezleme süreçleri tamamen tarayıcınızın kendi bünyesinde gerçekleştirilir. Tasarım kodlarınız veya web sitenizin görsel parametreleri hiçbir harici sunucuya iletilmez.
CSS Blob: border-radius = r1% r2% r3% r4% / r5% r6% r7% r8% | SVG Kübik Bezier Yolu: d = 'M x0 y0 C x1 y1, x2 y2, x3 y3 ... Z'
Kutunun 4 köşesinin hem yatay hem dikey yarıçapları 8 bağımsız yüzde değeriyle asimetrik olarak harmanlanır; pürüzsüz sürekli eğrilik (continuous curvature) elde edilir.