Cassie Evans

Creating my logo animation

https://www.cassie.codes/posts/creating-my-logo-animation/

Cassie Evans shares the multiple steps involved in the creation of the lovely animated logo of her personal website:

There's a few things going on in this logo animation. We've got

• SVG stroke animation
• SVG Clip-path
• Greensock for the animation
• Greensock's Custom Bounce, and Draw SVG plugins
• and a whole load of drawing stuff out in illustrator.

Looks like I could find some useful inspiration when I finally work on esviji v3…

• older link:
  Flexbox and padding
• newer link:
  I Visited 47 Sites. Hundreds of Trackers Followed Me.

---

Related contents with similar topics

1. • Nicolas Hoizey
   • 7 April 2023
   • animation, CSS
   • 4 reactions
   • permalink

   Chrome 113 beta adds support for @​media (update: slow) (Firefox already has it), great to remove some animations.

   But can we @​supports a @​media to use it only if supported? I don't think so.

   How do you use new @​media features progressively?

2. 

   Josh Collinsworth

   Ten tips for better CSS transitions and animations

   • Nicolas Hoizey
   • 21 March 2023
   • CSS, animation
   • 7 reactions

   users may not realize what it is about the transitions or animations on our websites and apps, but they can keenly spot the difference between good…

3. • Nicolas Hoizey
   • 8 February 2023
   • animation, Chromium, esviji, SMIL, SVG
   • permalink

   Chris Harrelson in a new message in this old thread about SMIL deprecation in Chromium:

   SMIL was not deprecated and there are no plans to do so. It's still a supported feature in Chromium.

   Yeah, really happy for https://play.esviji.com ! 🥰

4. 

   Maarten Van Hoof

   Responsive SVGs - container vs media queries

   • Nicolas Hoizey
   • 4 June 2021
   • SVG, responsive, CSS
   • 7 reactions

   Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML. Responsive…

5. • Nicolas Hoizey
   • 19 May 2021
   • CSS, Firefox, SVG, WebPerf
   • 2 reactions
   • permalink

   Worked on a site with an SVG sprite used as CSS background, and was painfully reminded of why I didn't do that in other projects yet.

   A 7 years old bug in #Firefox … 😭

   https://bugzilla.mozilla.org/show_bug.cgi?id=1027106

   I know there are workarounds.