Pens from Charlotte Dann https://codepen.io/pouretrebelle/ en nospam@codepen.io Copyright 2024 2022-11-23T17:19:12-07:00 Supercharged border-image with SVG https://codepen.io/pouretrebelle/pen/xxzWPoy https://codepen.io/pouretrebelle/pen/xxzWPoy Charlotte Dann

See the Code - See it Full Page - See Details

Using embedded SVG and border-image to make fancy frames; the can be used with any aspect ratio and even have a transluscent background. I explored this and other methods of making fancy corners with CSS on the first ever blog post on my new personal site :blush: https://charlottedann.com/article/fancy-frames-with-css

]]>
Supercharged border-image with SVG 2022-11-23T17:19:12-07:00
Canvas blur https://codepen.io/pouretrebelle/pen/XWEbWqZ https://codepen.io/pouretrebelle/pen/XWEbWqZ Charlotte Dann

See the Code - See it Full Page - See Details

The CanvasRenderingContext2D.filter method allows you to blur the contents of a canvas, but it doesn't work at the edges if you're blurring the whole canvas. This bleed method fixes that :sparkles: No Safari :(

]]>
Canvas blur 2022-07-05T13:43:54-07:00
Gasworks https://codepen.io/pouretrebelle/pen/MWJVNyv https://codepen.io/pouretrebelle/pen/MWJVNyv Charlotte Dann

See the Code - See it Full Page - See Details

Spot of art for a client

]]>
Gasworks 2021-04-13T21:56:27-07:00
SVG Jigsaw Solver (Drag'n'Drop version) https://codepen.io/pouretrebelle/pen/NWNOLPN https://codepen.io/pouretrebelle/pen/NWNOLPN Charlotte Dann

See the Code - See it Full Page - See Details

Give it a scroll, and drop in your own image if you fancy it. Experimenting with ideas for my generative art jigsaw puzzle project, follow @abstractpuzzles on Instagram for updates, launching soon! This pen uses a lotttt of css variables and calc maths to figure out how/where to position the pieces and set their transform-origin, and a spot of Sass's random to pick a rotation for each of them. It only uses js to set a css variable for the scroll position, and an enhancement to fit the scattered pieces to the aspect ratio of the screen (no viewport lengths in svgs, sad times). Thanks to @cassie-codes for the svg help and inspiration! (definitely works in Chrome 85, probably most modern browsers,no guarantees going back)

]]>
SVG Jigsaw Solver (Drag'n'Drop version) 2020-09-19T17:21:13-07:00
SVG Jigsaw Solver https://codepen.io/pouretrebelle/pen/YzqvWPb https://codepen.io/pouretrebelle/pen/YzqvWPb Charlotte Dann

See the Code - See it Full Page - See Details

Give it a SCROLL! Experimenting with ideas for my generative art jigsaw puzzle project, follow @abstractpuzzles on Instagram for updates, launching soon! This pen uses a lotttt of css variables and calc maths to figure out how/where to position the pieces and set their transform-origin, and a spot of Sass's random to pick a rotation for each of them. It only uses js to set a css variable for the scroll position, and an enhancement to fit the scattered pieces to the aspect ratio of the screen (no viewport lengths in svgs, sad times). Thanks to @cassie-codes for the svg help and inspiration! (definitely works in Chrome 85, probably most modern browsers,no guarantees going back)

]]>
SVG Jigsaw Solver 2020-09-18T08:31:43-07:00
Bordered trapezoid methods https://codepen.io/pouretrebelle/pen/ExKLLgj https://codepen.io/pouretrebelle/pen/ExKLLgj Charlotte Dann

See the Code - See it Full Page - See Details

]]>
Bordered trapezoid methods 2020-09-12T09:35:42-07:00
Pure CSS Art https://codepen.io/pouretrebelle/pen/wvKmBea https://codepen.io/pouretrebelle/pen/wvKmBea Charlotte Dann

See the Code - See it Full Page - See Details

just having a bit of fun with css

]]>
Pure CSS Art 2020-05-07T17:23:14-07:00
Op Art https://codepen.io/pouretrebelle/pen/OJPZwba https://codepen.io/pouretrebelle/pen/OJPZwba Charlotte Dann

See the Code - See it Full Page - See Details

Inspired by Bridget Riley (my op art hero), move your mouse around the demo. Her retrospective at the Hayward Gallery in London closes on 26/1/20, go see it while you can!

]]>
Op Art 2020-01-12T15:05:41-07:00
Article Deck https://codepen.io/pouretrebelle/pen/eYmeVjR https://codepen.io/pouretrebelle/pen/eYmeVjR Charlotte Dann

See the Code - See it Full Page - See Details

Messing around for a (will-writing) client with css custom properties

]]>
Article Deck 2020-01-10T15:06:20-07:00
nth-child Art https://codepen.io/pouretrebelle/pen/bPWvNp https://codepen.io/pouretrebelle/pen/bPWvNp Charlotte Dann

See the Code - See it Full Page - See Details

Homage to Bridget Riley 🙏 Try some different values! Maybe 15/3/2

]]>
nth-child Art 2019-07-05T12:02:19-07:00