The latest articles on DEV Community by Andriy Rodzyk (@rodzyk). https://dev.to/rodzyk https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F204171%2F2168bea8-e57f-4d67-ade9-640a8be71647.png https://dev.to/rodzyk en Andriy Rodzyk Mon, 05 May 2025 19:56:54 +0000 https://dev.to/rodzyk/svg-halftone-filter-demo-live-image-preview-toggle-3pe0 https://dev.to/rodzyk/svg-halftone-filter-demo-live-image-preview-toggle-3pe0 <p>Explore how halftone effects can be applied using pure SVG filters — no CSS tricks or raster effects. Upload your own image or paste a URL, then switch between two scalable vector halftone styles (half-tone and half-tone-hd). Great for experimenting with non-destructive, resolution-independent image filtering in real time.</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/qEExxGJ?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Andriy Rodzyk Wed, 23 Apr 2025 09:13:49 +0000 https://dev.to/rodzyk/a-shelf-of-stories-css-grid-comic-gallery-24m2 https://dev.to/rodzyk/a-shelf-of-stories-css-grid-comic-gallery-24m2 <p>A stylized manga/comic reading list built with CSS Grid and modern CSS features. Each card is colored using a custom --avarage-color variable extracted from the image, influencing shadows, borders, and background tints.</p> <p>Includes:</p> <p>Responsive layout using Grid</p> <p>Sectioned into “Reading”, “Completed”, and “Planning”</p> <p>Subtle scroll-based animations via view-timeline</p> <p>Randomized card rotations for a hand-placed look</p> <p>Font: Troubleside for a soft, printed aesthetic</p> <p>Perfect for showcasing your current reads or building your own visual backlog tracker.</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/QwwjYez?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Andriy Rodzyk Sun, 10 Nov 2024 08:43:59 +0000 https://dev.to/rodzyk/cross-stitch-shadow-cpc-2ll https://dev.to/rodzyk/cross-stitch-shadow-cpc-2ll <p>Check out this Pen I made!</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/zYgMzxM?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen svg Andriy Rodzyk Fri, 12 Jan 2024 22:10:16 +0000 https://dev.to/rodzyk/svg-filter-cross-blur-1d33 https://dev.to/rodzyk/svg-filter-cross-blur-1d33 <p>Check out this Pen I made!</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/KKEgQeG?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Andriy Rodzyk Thu, 11 Jan 2024 08:42:15 +0000 https://dev.to/rodzyk/ukrainian-embroidery-css-art-aa5 https://dev.to/rodzyk/ukrainian-embroidery-css-art-aa5 <p>Check out this Pen I made!</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/bGZwGMX?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Andriy Rodzyk Sun, 31 Dec 2023 14:33:06 +0000 https://dev.to/rodzyk/svg-filter-led-screen-11l4 https://dev.to/rodzyk/svg-filter-led-screen-11l4 <p>Check out this Pen I made!</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/QWojjZa?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen svg filter webdev Andriy Rodzyk Sat, 30 Dec 2023 18:04:42 +0000 https://dev.to/rodzyk/svg-filter-circle-blur-from-metalui-a-swiftui-package-41b https://dev.to/rodzyk/svg-filter-circle-blur-from-metalui-a-swiftui-package-41b <p>Check out this Pen I made!</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/NWEqwNR?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Andriy Rodzyk Sat, 30 Dec 2023 11:10:35 +0000 https://dev.to/rodzyk/svg-filter-cross-stitch-50jk https://dev.to/rodzyk/svg-filter-cross-stitch-50jk <p>Check out this Pen I made!</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/ZEPGyYx?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Andriy Rodzyk Sat, 30 Dec 2023 11:10:11 +0000 https://dev.to/rodzyk/svg-filter-pixelate-1j0h https://dev.to/rodzyk/svg-filter-pixelate-1j0h <p>Check out this Pen I made!</p> <p><iframe height="600" src="https://codepen.io/rodzyk/embed/vYbPvaZ?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Andriy Rodzyk Thu, 15 Jun 2023 07:41:32 +0000 https://dev.to/rodzyk/camera-lens-focus-range-sliders-codepenchallenge-toggles-168a https://dev.to/rodzyk/camera-lens-focus-range-sliders-codepenchallenge-toggles-168a <p><iframe height="600" src="https://codepen.io/rodzyk/embed/mdQeLmO?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen focus css svg Andriy Rodzyk Tue, 21 Feb 2023 19:28:57 +0000 https://dev.to/rodzyk/8bit-color-svg-filter-398c https://dev.to/rodzyk/8bit-color-svg-filter-398c <p><iframe height="600" src="https://codepen.io/rodzyk/embed/rNrQyvp?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen Andriy Rodzyk Wed, 15 Feb 2023 11:42:08 +0000 https://dev.to/rodzyk/css-parallax-cube-codepenchallenge-55pp https://dev.to/rodzyk/css-parallax-cube-codepenchallenge-55pp <p><iframe height="600" src="https://codepen.io/rodzyk/embed/LYJYKeW?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> support