SVG Overlay and Infinite Menu Background Animation

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

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!