Pens from Josh McCarty https://codepen.io/joshmcrty/ en nospam@codepen.io Copyright 2024 2023-12-13T04:17:32-07:00 Falling Snow with Looping CSS Animations https://codepen.io/joshmcrty/pen/ZEwNQPP https://codepen.io/joshmcrty/pen/ZEwNQPP Josh McCarty

See the Code - See it Full Page - See Details

]]>
Falling Snow with Looping CSS Animations 2023-12-13T04:17:32-07:00
Waving Banner With Text Using Canvas https://codepen.io/joshmcrty/pen/abLgrWY https://codepen.io/joshmcrty/pen/abLgrWY Josh McCarty

See the Code - See it Full Page - See Details

]]>
Waving Banner With Text Using Canvas 2022-02-03T22:22:30-07:00
Website SVG Logo https://codepen.io/joshmcrty/pen/GRrzNKO https://codepen.io/joshmcrty/pen/GRrzNKO Josh McCarty

See the Code - See it Full Page - See Details

This is a handwritten version of the SVG logo for my website, joshmccarty.com. The original logo was created using Adobe Illustrator and had filled paths with many more coordinates involved. This uses stroked paths with the minimum coordinates needed to achieve the same shape. These coordinates are also aligned to integers whereas the original had several floats. Overall I'm much happier with this result and learned a little more about drawing in SVG.

]]>
Website SVG Logo 2021-04-24T15:00:09-07:00
Draw a Dynamic Play Icon On Canvas https://codepen.io/joshmcrty/pen/dyGOKYz https://codepen.io/joshmcrty/pen/dyGOKYz Josh McCarty

See the Code - See it Full Page - See Details

]]>
Draw a Dynamic Play Icon On Canvas 2020-06-18T14:04:19-07:00
Dynamically Creating an <iframe> and Setting Its Contents https://codepen.io/joshmcrty/pen/pLLGBv https://codepen.io/joshmcrty/pen/pLLGBv Josh McCarty

See the Code - See it Full Page - See Details

]]>
Dynamically Creating an <iframe> and Setting Its Contents 2018-03-30T23:14:12-07:00
Render Office Fabric UI Icons into Canvas https://codepen.io/joshmcrty/pen/GOBWeV https://codepen.io/joshmcrty/pen/GOBWeV Josh McCarty

See the Code - See it Full Page - See Details

This pen offers a quick way to render an icon from the MS Office Fabric UI icon font onto an HTML canvas so it can be used as an image.

]]>
Render Office Fabric UI Icons into Canvas 2020-07-08T22:34:28-07:00
A Pen by Josh McCarty https://codepen.io/joshmcrty/pen/qVWpbw https://codepen.io/joshmcrty/pen/qVWpbw Josh McCarty

See the Code - See it Full Page - See Details

]]>
A Pen by Josh McCarty 2017-10-28T03:28:02-07:00
CSS-only Dropdown Menu Animation https://codepen.io/joshmcrty/pen/RVjGdP https://codepen.io/joshmcrty/pen/RVjGdP Josh McCarty

See the Code - See it Full Page - See Details

I used this technique on my personal blog, https://joshmccarty.com. The goal is to closely mimic an animated dropdown menu (typically done with JavaScript by animating the sub-menu's CSS height) with only CSS. Because you can't transition to auto values (i.e. the height), this uses a combination of transforms, opacity, and the clip property (instead of using display: none;) to hide/show the dropdown menu.

]]>
CSS-only Dropdown Menu Animation 2017-05-06T19:21:21-07:00
Falling Snow with Looping CSS Animations https://codepen.io/joshmcrty/pen/MbQOJP https://codepen.io/joshmcrty/pen/MbQOJP Josh McCarty

See the Code - See it Full Page - See Details

]]>
Falling Snow with Looping CSS Animations 2017-12-12T02:56:41-07:00
Viewport-based Font Size and Line Height https://codepen.io/joshmcrty/pen/beXdEZ https://codepen.io/joshmcrty/pen/beXdEZ Josh McCarty

See the Code - See it Full Page - See Details

]]>
Viewport-based Font Size and Line Height 2016-08-26T23:28:51-07:00