Shape up your website with CSS clip-paths
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dev
fonts
pics
.gitignore
Gruntfile.js
README.md
clip.min.js
draggabilly.min.js
favicon.ico
index.html
jquery.min.js
package.json
style.min.css

README.md

Clippy

Shape up your website with CSS clip-paths!

Clippy is a tool for generating values for shape functions for the new and cool CSS clip-path property. The property accepts several basic shapes that will be able to create with Clippy and their current implementation status:

  • circle() Currently disabled, still buggy when using a ratio that's not 1:1.
  • ellipse() Improved, handles now switch to best side.
  • polygon() Includes common preset shapes plus the ability to create a custom shape
  • inset() Improved, now supports radius value

Details

  • Utilizes draggabilly.js for the handles which each correspond to a point for CSS clip path. Works really well on touch devices, especially with the touch-action: none.
  • For development, using Grunt with SCSS, autoprefixer, uncss, minification for CSS, HTML, and javascript.
  • Material-ish design inspiration.
  • Mobile-first design, making things work great on mobile touch devices first and working responsively upwards from there.

To do

  • Done Enabled ellipse() shape.
  • Done Button to remove an added point for polygon() shapes (@razvancaliman suggestion)
  • Done Make a panel card with quick information about the clip-path property.
  • Done Add ability to make custom shapes
  • Done Add radius support for inset shape.
  • Working on Fixing circle() shape with ratio that isn't 11
  • Looking into Support values out of bounds (@thebabydino suggestion)
  • Looking into Add HTML5 localstorage to save things.
  • Looking into See how Clippy could be used with CSS Shapes module

Browser Support for Clip Path

caniuse.com


List of names of polygons (3-100 sides)

Triangle, Quadrilateral, Pentagon, Hexagon, Heptagon, Octagon, Nonagon, Decagon, Hendecagon, Dodecagon, Tridecagon, Tetradecagon, Pentadecagon, Hexadecagon, Heptadecagon, Octadecagon, Nonadecagon, Icosagon, Icosagon, Icosikaihenagon, Icosikaidigon, Icosikaitrigon, Icosikaitetragon, Icosikaipentagon, Icosikaihexagon, Icosikaiheptagon, Icosikaioctagon, Icosikaienneagon, Triacontagon, Triacontakaihenagon, Triacontakaidigon, Triacontakaitrigon, Triacontakaitetragon, Triacontakaipentagon, Triacontakaihexagon, Triacontakaiheptagon, Triacontakaioctagon, Triacontakaienneagon, Tetracontagon, Tetracontakaihenagon, Tetracontakaidigon, Tetracontakaitrigon, Tetracontakaitetragon, Tetracontakaipentagon, Tetracontakaihexagon, Tetracontakaiheptagon, Tetracontakaioctagon, Tetracontakaienneagon, Pentacontagon, Pentacontakaihenagon, Pentacontakaidigon, Pentacontakaitrigon, Pentacontakaitetragon, Pentacontakaipentagon, Pentacontakaihexagon, Pentacontakaiheptagon, Pentacontakaioctagon, Pentacontakaienneagon, Hexacontagon, Hexacontakaihenagon, Hexacontakaidigon, Hexacontakaitrigon, Hexacontakaitetragon, Hexacontakaipentagon, Hexacontakaihexagon, Hexacontakaiheptagon, Hexacontakaioctagon, Hexacontakaienneagon, Heptacontagon, Heptacontakaihenagon, Heptacontakaidigon, Heptacontakaitrigon, Heptacontakaitetragon, Heptacontakaipentagon, Heptacontakaihexagon, Heptacontakaiheptagon, Heptacontakaioctagon, Heptacontakaienneagon, Octacontagon, Octacontakaihenagon, Octacontakaidigon, Octacontakaitrigon, Octacontakaitetragon, Octacontakaipentagon, Octacontakaihexagon, Octacontakaiheptagon, Octacontakaioctagon, Octacontakaienneagon, Enneacontagon, Enneacontakaihenagon, Enneacontakaidigon, Enneacontakaitrigon, Enneacontakaitetragon, Enneacontakaipentagon, Enneacontakaihexagon, Enneacontakaiheptagon, Enneacontakaioctagon, Enneacontakaienneagon, Hectogon