Skip to content

Instantly share code, notes, and snippets.

@nucliweb
Forked from yuanchuan/index.html
Created October 19, 2018 07:30
Show Gist options
  • Save nucliweb/f9d02f4e80fa2d9d78a6ef2f0a9f67ed to your computer and use it in GitHub Desktop.
Save nucliweb/f9d02f4e80fa2d9d78a6ef2f0a9f67ed to your computer and use it in GitHub Desktop.
Alien land
<css-doodle>
:doodle {
@grid: 20x1 / 60vmin;
overflow: hidden;
}
:container {
transform: scale(25);
filter: @svg-filter(<svg>
<filter>
<feTurbulence baseFrequency="@r(.016, .056, .001)" seed="@r(100)" numOctaves="@r(8, 15)" />
<feDisplacementMap in="SourceGraphic" scale="@r(-100, 100)" />
</filter>
</svg>);
}
filter: @svg-filter(<svg>
<filter>
<feGaussianBlur in="SourceGraphic" stdDeviation="20 0" result="blur" />
</filter>
</svg>);
@place-cell: center;
@size: 100%;
@random(.8) {
mix-blend-mode: overlay;
}
background: @multi(200, (
radial-gradient(@pick(#E63946, #F1FAEE, #A8DADC, #457B9D, #1D3557), transparent)
@r(0%, 100%, .1) @r(0%, 100%, .1) / @r(30%) @r(5%)
no-repeat
));
);
</css-doodle>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment