Archive of: SVG

• 100 Days of Code - Week 6

  March 22, 2021

  This week I tried recreating some neat link styles I saw on the Field Notes website, tried out Josh Comeau’s full-bleed grid tutorial, did a quick refresher on variable fonts, and tried out a few other things with CSS, SVG, and JavaScript.

  100daysofcode, CSS, HTML, SVG, JavaScript, CSS grid, typography

• Text on a path in SVG

  March 20, 2021

  I wanted to do a quick refresher on how to add text that displays along a path in an SVG. While working on this, I came across something I had not encountered before. When placing a link within the text, in order to alter it's color you have to modify its fill attribute, not its color.

  100daysofcode, CSS, HTML, SVG

• 100 Days of Code - Week 5

  March 16, 2021

  This past week was full of new challenges. I got stumped a couple of times and had to decide to call it good on a few posts, but I think I learned quite a bit.

  100daysofcode, CSS, HTML, SVG, JavaScript

• Making Faces - SVG and JavaScript

  March 15, 2021

  After spending some time away from the code I wrote yesterday and reading a very useful article, I was able to finish this silly prototype. I noticed I had some pretty gnarly typos in my JavaScript yesterday that I'm embarassed to point out, but I am know going to make sure I double check my namespace URIs.

  100daysofcode, CSS, HTML, JavaScript, SVG

• Playing with an SVG of my old logo

  March 14, 2021

  How hard is it to add an SVG element that makes use of the USE element to place another instance of an SVG symbol into a document using JavaScript? Turns out, it's tough. At least for me at this time. So instead I made my old logo animate when hovered over. This probably won't work on mobile, but at this moment that's ok.

  100daysofcode, CSS, HTML, JavaScript, SVG

• Flexbox and SVG traffic light

  February 14, 2021

  I learned about using the currentcolor keyword within SVG. It's a pretty handy keyword that allows you to pass color values from CSS into paths into SVG. I still have more to learn about it and its best uses, but it was neat to learn about it.

  100daysofcode, CSS, HTML, SVG

• Playing with clip-path and an orange cat

  February 10, 2021

  Today I wanted to work more with using SVGs within the clip-path property. I spotted this cat earlier today while out for a walk. It was a bit shy, but I got a few good pictures of it. An unfortunate thing I just learned after creating this post is the path doesn't quite fit within the current layout (as of today, 2021/2/10) of these code posts, but hopefully I can sort out a better solution in the future. I tend to build each of these posts on a single HTML page outside of CMS, and end up having to make tweaks afterwards to make things display correctly afterwards. Ah technical debt, we meet again.

  100daysofcode, CSS, HTML, SVG, clip-path

• Wii Menu Part One

  July 12, 2020

  I'm going to take a shot at recreating the Wii menu using CSS, SVG, and HTML. I'm hoping I can do it without using any JavaScript, but I'll see further down the road. Can't do a lot with it today, so I'm just doing a bit to get things started.

  CSS, HTML, SVG

• Sakura petals falling with CSS and JS

  June 23, 2020

  I worked with my sakura petals again today. I wanted to see if I could animate the petals falling and randomize their positions to some extent. Luckily with the help of Chris Ferdinandi's concise and insightful posts on his website, I was able to add some vanilla JavaScript to help me do just that.

  CSS, SVG, HTML, JavaScript, code

• SVG and CSS Sakura

  June 22, 2020

  Today I wanted to play with using a flower petal made in SVG and see if I could reuse the original SVG multiple times throught my HTML and manipulate it with CSS. I'm glad I was able to sort out the rotation point with transform-origin. Firefox's inspector really came in handy when sorting where to place it.

  CSS, HTML, code, SVG