user profile image

This pen experiments with some simple text effects you can create using text-shadow and hover transitions. I’ve also played around with creating a patterned hover text effect, mixing those effects with a bit of SVG.

Created by Ashley Nolan.


More Pens created by me :


  1. Some of the functions you are declaring already exist in codePen by default: I never use compass but very often make use of sin($n) and cos($n) and pi()

    Anyways.. nice pen.

  2. Ah, didn’t realise they were included in the CodePen default settings – I’ll edit it and put them in as a comment at the bottom of the code. Thanks :)

  3. Its awsome! Thx for this examples!!

  4. Hi Ash,

    This is a very rudimentary question - I'm an art director fresh to coding / svg. I tried to re-create this file on my computer, created and linked a separate .css to the html file. Do I need to create a separate .svg file as well? If so, what goes into it? Really cool effect - enjoying the learning process. - Yelena

  5. Hi Yelana,

    I’ve setup a github repo with how I have done it outside of CodePen – so with separate HTML and CSS files. The SVG is a part of the HTML. Here’s a link to the repo

    Hope that helps!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.