CSS clip path animation inspired on @QingshanYu https://www.behance.net/gallery/16232721/Animated-Icons-Exercise
Basic shape masking with no SVG markup. Single element. One line of CSS. Chrome only.
CSS 2.1 specifies the clip property, which you can use to reference an SVG. This uses basic CSS shapes instead, introduced in the W3 CSS Shapes working draft.
Creating responsive comic panels with dynamism using CSS clip-path, including SVG fallback. Full explanatory article on my site. Photograph by @mopictures, licensed under Creative Commons.
Material Design inspired hamburger menu created using CSS Clip Paths. Literally only works in Chrome /sadface.
Using :before and :after as a CSS clip path alternative.
In response to the question asked here : https://hashnode.com/post/alternative-to-css-clip-path-cikqx3y2e01of6v53z89g2z1v
It's not really possible (as far as I know) to make a border around an element with a clip path. This method uses an inside and outside element, the background of the outside one being the border.
Texturized hexagon with a proper cursor collision. Done with child & pseudo elements, background inheritance, and 2D transforms.
single element animation icon~
New project to create CSS clip-paths
Need to know how to enable it? Go here.