<css-doodle>
:doodle {
@grid: 3 x 1;
}
width: 40vmin;
height: 80vmin;
position: relative;
box-sizing: border-box;
margin: 1vmin;
border-radius: 5vmin;
border:2px solid #666;
box-shadow: 1px 1px 4px 2px #222;
overflow: hidden;
--size: @r(6, 20)px;
--randomDeg: @r(30, 60);
--colorA: rgb(@r(255), @r(255), @r(255));
--colorB: rgb(@r(255), @r(255), @r(255));
--colorC: rgb(@r(255), @r(255), @r(255));
--colorD: rgb(@r(255), @r(255), @r(255));
--colorE: rgb(@r(255), @r(255), @r(255));
--colorF: rgb(@r(255), @r(255), @r(255));
--colorG: rgb(@r(255), @r(255), @r(255));
--colorH: rgb(@r(255), @r(255), @r(255));
background:
repeating-linear-gradient(
calc(var(--randomDeg) * 1deg),
var(--colorA) 0,
var(--colorA) calc(var(--size) * 1),
var(--colorB) calc(var(--size) * 1),
var(--colorB) calc(var(--size) * 2),
var(--colorC) calc(var(--size) * 2),
var(--colorC) calc(var(--size) * 3),
var(--colorD) calc(var(--size) * 3),
var(--colorD) calc(var(--size) * 4),
var(--colorE) calc(var(--size) * 4),
var(--colorE) calc(var(--size) * 5),
var(--colorF) calc(var(--size) * 5),
var(--colorF) calc(var(--size) * 6),
var(--colorG) calc(var(--size) * 6),
var(--colorG) calc(var(--size) * 7)
),
repeating-linear-gradient(
calc(var(--randomDeg) * -1deg),
var(--colorA) 0,
var(--colorA) calc(var(--size) * 1),
var(--colorB) calc(var(--size) * 1),
var(--colorB) calc(var(--size) * 2),
var(--colorC) calc(var(--size) * 2),
var(--colorC) calc(var(--size) * 3),
var(--colorD) calc(var(--size) * 3),
var(--colorD) calc(var(--size) * 4),
var(--colorE) calc(var(--size) * 4),
var(--colorE) calc(var(--size) * 5),
var(--colorF) calc(var(--size) * 5),
var(--colorF) calc(var(--size) * 6),
var(--colorG) calc(var(--size) * 6),
var(--colorG) calc(var(--size) * 7)
);
background-blend-mode: @p(multiply, color-burn, screen, lighten, difference);
</css-doodle>
xxxxxxxxxx
html, body {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #333;
}
xxxxxxxxxx
document.addEventListener('click', function(e) {
e.target.update && e.target.update();
});
// const doodle = document.querySelector('css-doodle');
// console.log('doodle', doodle.seed);
This Pen doesn't use any external CSS resources.