SVG Overlay and Infinite Menu Background Animation


A little menu effect with an SVG overlay and an infinite background CSS animation.


From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

Today I’d like to share a little menu effect with you. It is composed of two things which is an SVG path overlay animation when it opens (or closes) and an infinite CSS powered background animation of an image grid.

Nothing special really, but I enjoyed putting it together and hopefully it is somehow useful to you!

The SVG path animation for the overlay is based on this demo by Sebastien Gilbert which is a good starter for a nice motion. If you need to adjust paths, I can recommend this fantastic path editor tool by Yann Armelin.

The infinite background animation of the menu is made with a CSS animation. The trick is to have a repeated set of images and once we translate to the visually equal part, we restart the animation.

.tiles {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 150vh;
	display: flex;
	opacity: 0.5;
	flex-direction: column;
	justify-content: center;
	transform: translate3d(-50%,-50%, 0) rotate(22.5deg);

.tiles__line {
	display: flex;
	transform: translateX(25%);
	animation: runner 10s linear infinite;

.tiles__line:nth-child(2) {
	animation-duration: 16s;

.tiles__line:nth-child(3) {
	animation-duration: 22s;

@keyframes runner {
	to {
		transform: translateX(-25%);

Check out the CSS-Only Marquee Effect, if you’d like to understand the details of this.

And this is how it all comes together:

Hope you enjoy this and find it useful!

Source link

About Author


Please enter your comment!
Please enter your name here

Share post:




More like this

How to Create Animated GIFs from GSAP Animations — SitePoint

In this article, I’m going to explain how...

Cold Days, Shining Lights (December 2023 Wallpapers Edition) — Smashing Magazine

Could there be a better way to welcome...

Fixing organizational silos: 7 major challenges of the silo mentality

Turn a fragmented team into a collaborative unit...