CSS and SVG Shapes are awesome because of its simplicity and the dramatic difference it can make when used properly. There are some CSS properties that change the shape of items like shape-outside that lets you wrap text that conforms to the shape of your image. So here are 25 Interesting Techniques To Use CSS & SVG Shapes to demonstrate how CSS ans SVG are used to create some cool design layouts.
Organic Shape Animations with SVG clipPath
Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.
Gradient Topography Animation
An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.
CSS Shapes with Sass
Mixins to create the most commonly used shapes in CSS.
CSS Border-Radius Can Do That?
How to create very cool effects with a rarely used feature.
CSS Gradient Clip-Path Borders
This pen shows how the CSS clip-path property can be used to create a variety of shaped gradient borders.
Morphing Polygons
Nice concept to do some fun morphing shapes running on an infinite animation loop. Could be neat as a way to give life to otherwise boring UI elements.
Organic SVG Shape Morph Ideas
A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.
On-Scroll Morphing Background Shapes
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
1 Element CSS Rainbow Gradient Infinity
Ana puts some bona fide CSS trickery to use to get a rainbow gradient follow the shape of an infinity sign.
MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes
CSS blend modes, clipping paths and filters make a number of effects that were previously available only in PhotoShop possible on the web.
Wrap Text Around Curve
Shape-outside can be an SVG.
Creating Non-Rectangular Layouts With CSS Shapes
In this article we’re going to go over the basics of declaring shapes, and creating some simple layouts using these new CSS technologies. When more CSS Shapes features are implemented, more complex and awesome layouts will be possible, but even with what we have at hand now, some interesting and very creative layouts can be created with a little extra experimentation.
Dynamic Shape Overlays with SVG
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
How to Draw Your Face in CSS
Drawing in CSS comes with a multitude of limitations, and if we want to draw in CSS, we need to know these limitations.
Loading Petal Spinner
A colorful, flower shaped loading spinner with progress bar.
Species in Pieces
This is some amazing CSS polygon, design and animation work.
CSS Shapes experiment (webkit only)
Rachel gives you a glimpse in to the possibility of a future where we can literally bend DOM elements to our Will with CSS.
shape-outside with clip-path
Using shape-outside you can wrap text around a shape, but adding clip path allows for the shape to be cut out from the whole.
Mimicking CSS shape’s shape-inside property
This technique uses two shapes set as shape-outside to mimic the functionality of shape inside. The text flows within the circle. I’ve also placed it within an SVG foreignobject tag to make the shape scalable.
Material Design Shape Slider
Get your geometry on with this Material design inspired shape slider.
Pure CSS Clipping Shape
Pure CSS shapes made with image, gradients, semitransparent, transitions, and clip paths.
Experiment 3
Experimenting with shape-outside within a layout.
A CSS Venn Diagram
A base model of a CSS Venn diagram that is accessible, responsive, and uses progressive enhancement.
Circular NavBar
Inspired from google material design and Circles, created this hamburger style circular NAVBAR, ready to tag along on your website design.
Actual Rotating Slider
Proof of concept rotating slider. Uses clip-path and lots of math.
