website of Carl Philipe Brenner
website of Carl Philipe Brenner

There is an Interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When we mouse hover over on the box items in the grids, we can see a subtle animation happening. The grid becomes transparent and the border lines of each side animate clockwise in a rhythmic manner, creating nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. However that can be done using SVG and CSS transitions. This experiment & code structures are present in the codrops.

We can surely create this effect without SVG, even without extra elements, just using pseudo-elements. But here we want to explore what we can do with SVG and how we can control it via CSS rather than using JavaScript.

See experiment.

Advertisements