My face with a Photoshop cutout filter applied to it

KATRINEMARIE.ME

Welcome. Click on an image below to read about the given project.

Back to homepage

SVG marble escher tiles

6. November 2015

See the Pen SVG marble escher tile pattern by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

Two months pondering how to achieve a specific effect with SVG filters finally paid off...

I saw a photo over three months ago of some marble tiles that made me immediately think 'This could be done in SVG'! I just couldn't immediately think of the method. I was aware that it would be several filters combined, but I couldn't guess which ones right off the bat.

I knew that turbulence would have to play a part, but that was about it.

Then I came across a demo by Dirk Weber where he showed some awesome SVG filter effects on text, and I realized that I could use a modified version of his filter to achieve the effect I was going for. His version of the filter included some things I didn't need, which I duly removed, and I had to (drastically) alter the baseFrequency value of the turbulence filter to make it more, well, let's say 'fuzzy', in order to match the marble look I was going for.

I also had to make two different versions of the filter in order to get a convincingly random surface, and to make one of the 'sides' of the tiles markedly lighter than the other.

I'd say I'm fairly pleased - but I have to, of course, since I did ponder the filter issue for as long as I did. Now at least it's been completed, and I can move on to something new.

Back to homepage