joshua/seigler.github.io
1
0
Fork 0
mirror of https://github.com/seigler/seigler.github.io synced 2025-07-27 07:16:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

⚡ Improve paint effect

Browse source
This commit is contained in:
Joshua Seigler 2018-01-05 22:55:31 -05:00
parent 2396d1147b
commit d2a13b79bd
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/static/art/rothko.svg
View file

@ -1,11 +1,14 @@
<svg width="100%" height="100%" viewBox="0 0 300 400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg width="100%" height="100%" viewBox="0 0 300 400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<filter id="paint" x="0" y="0"> <filter id="paint" x="0" y="0">
<feTurbulence id="turbSpread" result="turbulenceFine" type="fractalNoise" baseFrequency="4" numOctaves="1"/> <feTurbulence result="turbulenceFine" seed="0" type="fractalNoise" baseFrequency="0.2" numOctaves="3"/>
<feTurbulence id="turbDistortion" seed="0" result="turbulenceFat" type="fractalNoise" baseFrequency="0.005" numOctaves="5"/> <feTurbulence result="turbulenceFat" seed="0" type="fractalNoise" baseFrequency="0.05" numOctaves="4"/>
<feDisplacementMap in="SourceGraphic" in2="turbulenceFat" result="sloppy" scale="4"/> <feDisplacementMap in="SourceGraphic" in2="turbulenceFat" scale="10"/>
<feGaussianBlur in="sloppy" result="blurred" stdDeviation="3" /> <feDisplacementMap in2="turbulenceFine" scale="5"/>
<feDisplacementMap in="blurred" in2="turbulenceFine" result="final" scale="5"/> <feGaussianBlur stdDeviation="0 2" />
<feDisplacementMap in2="turbulenceFine" scale="-5"/>
<feGaussianBlur stdDeviation="2 0" />
<feDisplacementMap in2="turbulenceFat" scale="-10"/>
</filter> </filter>
</defs> </defs>
<svg viewBox="0 0 300 400" x="0" y="0" width="300" height="400" id="rects" filter="url(#paint)"></svg> <svg viewBox="0 0 300 400" x="0" y="0" width="300" height="400" id="rects" filter="url(#paint)"></svg>
@ -19,9 +22,10 @@
let mainWidth = 300 - gap + Math.random() * 60 - 60; let mainWidth = 300 - gap + Math.random() * 60 - 60;
let mainHeight = 400 - gap + Math.random() * 60 - 60; let mainHeight = 400 - gap + Math.random() * 60 - 60;
let shapes = Array(stripes); let shapes = Array(stripes);
let seed = Math.floor(Math.random() * 100000); let seedables = document.querySelectorAll('[seed]');
document.getElementById('turbSpread').setAttributeNS(null, 'seed', seed); for (let i = 0; i < seedables.length; ++i) {
document.getElementById('turbDistortion').setAttributeNS(null, 'seed', seed); seedables[i].setAttributeNS(null, 'seed', Math.floor(Math.random() * 100000));
}
for (let i=0; i < stripes; i++) { for (let i=0; i < stripes; i++) {
shapes[i] = { shapes[i] = {
color: randomHsl(), color: randomHsl(),

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After