Skip to content

Instantly share code, notes, and snippets.

@joeldrapper

joeldrapper/squircle.css

Created May 21, 2025 12:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joeldrapper/42dae944bf0cb77ff6ec28559275aec0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joeldrapper/42dae944bf0cb77ff6ec28559275aec0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joeldrapper created this gist May 21, 2025.
    15 changes: 15 additions & 0 deletions squircle.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    @utility mask-squircle-1 {
    mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3e%3cpath d='M 0,0.5 C 0,0 0,0 0.5,0 1,0 1,0 1,0.5 1,1 1,1 0.5,1 0,1 0,1 0,0.5'/%3e%3c/svg%3e");
    }

    @utility mask-squircle-2 {
    mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3e%3cpath d='M 0,0.5 C 0,0.0575 0.0575,0 0.5,0 0.9425,0 1,0.0575 1,0.5 1,0.9425 0.9425,1 0.5,1 0.0575,1 0,0.9425 0,0.5'/%3e%3c/svg%3e");
    }

    @utility mask-squircle-3 {
    mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3e%3cpath d='M 0,0.5 C 0,0.115 0.115,0 0.5,0 0.885,0 1,0.115 1,0.5 1,0.885 0.885,1 0.5,1 0.115,1 0,0.885 0,0.5'/%3e%3c/svg%3e");
    }

    @utility mask-squircle-4 {
    mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3e%3cpath d='M 0,0.5 C 0,0.1725 0.1725,0 0.5,0 0.8275,0 1,0.1725 1,0.5 1,0.8275 0.8275,1 0.5,1 0.1725,1 0,0.8275 0,0.5'/%3e%3c/svg%3e");
    }