SVGとclip-pathで作るクロソイド曲線（スーパー楕円）を使った角丸デザイン

note

角丸の形状にクロソイド曲線（スーパー楕円）を用いたデザインです。角丸のサイズを変更できるスライダーから設定された角丸サイズに合わせてクロソイド曲線が再描画されるようになっています。このサンプルでは、通常の角丸との違いを視覚的に確認できるようになっています。

また、角丸に内接する矩形サイズを求めることで、モバイルアプリのアイコンなど、円形にトリミングされる場合のセーフゾーンを確認できます。

ベースとなる矩形のサイズと入力された角丸サイズから、クロソイド曲線を描く座標を計算し、SVG形式のパスとして描画されたものをclip-pathプロパティによって矩形要素に適用することで、クロソイド曲線の角丸形状を実現しています。

クロソイド曲線を用いた角丸デザインは、従来の正円の円弧を使用した角丸デザインとは異なり、より滑らかで自然な曲線を描けます。クロソイド曲線は、曲率が一定の割合で変化するため、視覚的に心地よい流れを生み出します。この特性により、より洗練された印象を与えることができます。

※このサンプルでは、通常の角丸と視覚的な角丸サイズを近似させるため、クロソイド曲線の変化率を調整しています。

【使用ライブラリ】 React