Pens from Rob DiMarzo https://codepen.io/robdimarzo/ en nospam@codepen.io Copyright 2024 2022-11-17T04:40:20-07:00 Conic Gradient Radar https://codepen.io/robdimarzo/pen/vYreyxM https://codepen.io/robdimarzo/pen/vYreyxM Rob DiMarzo

See the Code - See it Full Page - See Details

Conic, radial, and linear gradients incoming! A stereotypical radar made with a bunch of gradients plus some nifty CSS-only cursor trails with grid, masks, and mix-blend-mode to mimic stuff being picked up by the radar.

]]>
Conic Gradient Radar 2022-11-17T04:40:20-07:00
Generative Rorschach Inkblot https://codepen.io/robdimarzo/pen/QWxWoeG https://codepen.io/robdimarzo/pen/QWxWoeG Rob DiMarzo

See the Code - See it Full Page - See Details

What do you see? 👀 I made this randomly generating Rorschach that creates 50 svg circles of various size and location, then applies an svg gaussian blur filter for gooiness. Each circle is rendered every 5 milliseconds along with a SMIL animation, then appended to a group. The svg is mirrored via use, flipped via css transform, and aligned with flexbox.

]]>
Generative Rorschach Inkblot 2022-10-27T13:38:07-07:00
Variable Font Fun with JS-driven CSS Variables https://codepen.io/robdimarzo/pen/eYVpRXm https://codepen.io/robdimarzo/pen/eYVpRXm Rob DiMarzo

See the Code - See it Full Page - See Details

Move your mouse around to manipulate this variable font via JS-driven CSS variables along 8 different axes! Each edge and corner of the viewport is associated to a font axis, so moving your cursor between them and the center will calculate the right value for that axis. Read code comments for a walk through of how it works! This demo showcases Roboto Flex, a variable font recently created by Font Bureau and added to Google Fonts. Roboto Flex offers a jaw-dropping 12 axes, even though this demo only utilized 8 of them. Learn more: https://material.io/blog/roboto-flex "The five boxing wizards jump quickly" is my favorite pangram - a phrase that contains every letter of the alphabet.

]]>
Variable Font Fun with JS-driven CSS Variables 2022-05-20T03:18:38-07:00
PlayStationOneDiv 🔶 https://codepen.io/robdimarzo/pen/JjpdmXw https://codepen.io/robdimarzo/pen/JjpdmXw Rob DiMarzo

See the Code - See it Full Page - See Details

Can you hear the sound in your head? :) A one div recreation of the startup animation from the PlayStation 1. Source: https://www.youtube.com/watch?v=oAhvQoLpvsM

]]>
PlayStationOneDiv 🔶 2022-05-05T16:33:05-07:00
8-bit pixel border https://codepen.io/robdimarzo/pen/eYWmxKr https://codepen.io/robdimarzo/pen/eYWmxKr Rob DiMarzo

See the Code - See it Full Page - See Details

]]>
8-bit pixel border 2021-06-30T22:11:06-07:00
RGBConfettiMYK â—ˆ Generative Art https://codepen.io/robdimarzo/pen/oNYjQZm https://codepen.io/robdimarzo/pen/oNYjQZm Rob DiMarzo

See the Code - See it Full Page - See Details

]]>
RGBConfettiMYK â—ˆ Generative Art 2021-02-04T17:58:13-07:00
200 FOLLOWERS https://codepen.io/robdimarzo/pen/ExPBqYX https://codepen.io/robdimarzo/pen/ExPBqYX Rob DiMarzo

See the Code - See it Full Page - See Details

Thanks for following! To celebrate reaching 200 CodePen followers, I've made a fun lil thing with variable fonts, blend modes, and animation :)

]]>
200 FOLLOWERS 2020-07-31T14:43:34-07:00
RBG-in-RGB https://codepen.io/robdimarzo/pen/NWxdpWj https://codepen.io/robdimarzo/pen/NWxdpWj Rob DiMarzo

See the Code - See it Full Page - See Details

RBG and RGB are worlds apart, even though their acronyms are so similar. Let's find out what happens when we combine them! **RBG** is Ruth Bader Ginsberg, a United States Supreme Court Justice and all-around badass lady. **RGB**, on the other hand, is a color format that combines the red, green, and blue light spectrums to create color. This pen uses a combination of background-blend-mode and mix-blend-mode to effectively manipulate and blend the color channels. __The image of RBG wearing a crown is from the cover of "Notorious RBG: The Life and Times of Ruth Bader Ginsberg" by Irin Carmon and Shana Knizhnik, published by Dey Street Books, 2015. __

]]>
RBG-in-RGB 2020-06-24T16:15:28-07:00
HEXplorer https://codepen.io/robdimarzo/pen/xxZgKOR https://codepen.io/robdimarzo/pen/xxZgKOR Rob DiMarzo

See the Code - See it Full Page - See Details

An easy way to observe how hex codes work 🧬 Play with the color selector to see how hex code values change to represent the current color. But what's in a hex code anyways? The 6 values of a hex code reflect the color's underlying red green and blue channels. Each position corresponds with the following channels: 1 – Red 2 – Red (minor) 3 – Green 4 – Green (minor) 5 – Blue 6 – Blue (minor) Values are in order from 0 1 2 3 4 5 6 7 8 9 A B C D E F – with 0 being the lowest and F the highest. For each channel, 00 is the absence of color while FF is the full expression of that color channel. I used the awesome iro.js for the color selector.

]]>
HEXplorer 2020-06-18T17:15:04-07:00
Theming with CSS Variables https://codepen.io/robdimarzo/pen/oNjKGXp https://codepen.io/robdimarzo/pen/oNjKGXp Rob DiMarzo

See the Code - See it Full Page - See Details

Demo of using CSS Variables as design tokens that can be applied as theme variables. I have placed both themes side-by-side for this demo. However, in an app these theme would be switched by changing a flag at a high-level within the document., cascading into the entire document. **I made this demo to report an issue in css-vars-ponyfill not working as expected in legacy browsers when variables are used in this way: https://github.com/jhildenbiddle/css-vars-ponyfill/issues/127

]]>
Theming with CSS Variables 2020-05-31T15:07:53-07:00