← All elements
<div class="art">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>About this animation
A five by five grid of red and white tiles whose triangular halves wipe open and shut with animated clip-paths, framed by a thin red border.
How it works
A five by five grid is built with CSS grid and custom properties for size and colour. Each cell holds a red and a white half, and two clip-path keyframes redraw each half as a polygon that wipes from a full square down to a triangle and back, creating a rippling pattern.
Ways to customise it
- Change --color-box-1 and --color-box-2.
- Edit --row-col-size for a larger grid.
- Change --animation-speed.
Good to know
clip-path animation is supported in all current browsers. The pattern flickers quickly in places, so consider a calmer speed for sensitive users.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.