Skip to content
Nick Hart

Nick Hart

Web Devlopment, Projects and tutorials

Tag Archives: svg

Animated SVG Cyberpunk logo (with filters)

See the Pen Cyberpunk animated SVG logo {fork} by IpsumLorem16 (@ipsumlorem16) on CodePen. Try holding down the mouse-button, and clicking/hovering over the logo. In this post I will describe how I used SVG filters, CSS and GSAP to create my own version of the animated cyberpunk logo.

Posted byNick HartApril 18, 2021April 18, 2021Posted inWeb developmentTags: animationsvgsvg filterwebdev

SVG loading spinner

By animating the stroke properties of a SVG circle you can create a cool spinner loading icon.

Posted byNick HartMarch 5, 2020February 21, 2021Posted inWeb developmentTags: animationloading iconsvgtutorial

An Introduction to SVG animation

For anyone who wants to try SVG animation, but has no idea where to start.

Posted byNick HartFebruary 19, 2020April 23, 2024Posted inWeb developmentTags: animationsvgtutorialwebdev

Animated SVG loading Icons

Three SVG dot loading Icons, animated with CSS. In a few different styles.

Posted byNick HartJune 19, 2019February 21, 2021Posted inWeb developmentTags: loading iconsnippetssvgwebdev

Recent Posts

  • I created a Web Extension
  • Animated SVG Cyberpunk logo (with filters)
  • Making accessible custom Radio Inputs
  • SVG loading spinner
  • An Introduction to SVG animation

Archives

  • April 2024
  • April 2021
  • September 2020
  • March 2020
  • February 2020
  • August 2019
  • June 2019
  • May 2019
  • March 2019

Categories

  • projects
  • Web development

Tags

addon animation bugs javascript loading icon node projects python s3 scraping security snippets svg svg filter tutorial web webdev web extension

About

Hi! I am Nick , and this site is intended to document my projects, as well as discussing topics such as: web development, security, Linux, arduino, electronics, repairs and making.

Nick Hart,