A decorative website background effect where SVG shapes morph and transform on scroll.

Codrops

Last update: Dec 26, 2022

Related tags

Effect MorphingBackgroundShapes

Overview

Morphing Background Shapes

A decorative website background effect where SVG shapes morph and transform on scroll.

Article on Codrops

Demo

This demo is kindly sponsored by HelloSign API.

Credits

anime.js by Julian Garnier
scrollMonitor.js by Stu Kabakoff
imagesLoaded by David DeSandro
Images copyright by Jim Lepage. Purchase here: Abstract Paint Remix, Vol. 1
Fonts: Nexa Bold by Fontfabric and Roboto Mono by Christian Robertson.
SVG shapes made with Inkscape

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

Sep 23, 2022

Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

May 6, 2022

React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

Dec 24, 2022

A vue.js particles animation background component

particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React

Dec 24, 2022

A sticky image effect for a slideshow inspired by ultanoir's website.

How to Create a Sticky Image Effect with Three.js A sticky image effect for a slideshow inspired by ultanoir's project showcase slideshow. Article on

Nov 18, 2022

Create cool animated SVG spinners, loaders and other looped animations in seconds

SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG

Dec 24, 2022

Modern ways of revealing new content using SVG animations.

Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe

Dec 30, 2022

circle-svg-animation

Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen

Aug 18, 2022

Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Oct 16, 2022

Comments

Error Unexpected end of attribute

When trying to modify the SVG I get an error attribute d: Unexpected end of the attribute. Expected number, "…50.2420072000501". anime.min.js:25 I can't figure it why?

opened by alejuu 0

A decorative website background effect where SVG shapes morph and transform on scroll.

Related tags

Overview

Morphing Background Shapes

Credits

License

Misc

You might also like...

Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

React particles animation background component

A vue.js particles animation background component

A sticky image effect for a slideshow inspired by ultanoir's website.

Create cool animated SVG spinners, loaders and other looped animations in seconds

Modern ways of revealing new content using SVG animations.

circle-svg-animation

Some shape morphing hover effects on images using SVG clipPath.

Comments

Error Unexpected end of attribute

Owner

Codrops

Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Add a water ripple effect to your background using WebGL.

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Switch the background-image with using effect.

A motion hover effect for a background grid of images.

fixed-background-effect

Javascript and SVG odometer effect library with motion blur