Codrops
  • All Posts
  • Demos Hub
  • Webzibition
  • The Collective

hoversvg

Creating a Border Animation Effect with SVG and CSS

In Tutorials, Feb 26, 2014 by Manoela Ilic

The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines.

menuoverlaysvg

Fullscreen Overlay Effects

In Playground, Feb 6, 2014 by Manoela Ilic

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

Wix Studio
Seamlessly transform your Figma designs into responsive, business-ready sites with the Figma to Wix Studio plugin.
Readymag
Make designs interactive & publish as websites with Readymag. Transfer anything from Figma to Readymag in 4 clicks with a plugin.
Creative Coding Club
GSAP3: Beyond the Basics Ready to take your GSAP3 skills to the next level? Learn "must know" features of GSAP3 that will open your eyes to new ways of creating and controlling your animations. Use "cdrps" for 20% off!
Explore the site
  • Home
  • Articles
  • Tutorials
  • Playground
  • Demos Hub
  • Webzibition
  • The Collective
  • CSS Reference
  • Freebies
  • About
  • Get in touch
  • Advertise
  • Privacy Policy
  • License
Follow Codrops
  • GitHub
  • Bluesky
  • Instagram
  • Facebook
  • Telegram
  • Mastodon
  • X
  • RSS Feed
  • Proudly hosted by Liquid Web hosting Liquid Web logo
  • Content delivered by
  • © Codrops 2025
Support us on Patreon logo