1
happy halloween - drip drip drip
source link: https://codepen.io/andyfitz/pen/OJjmYrG
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
0 unsaved changes
xxxxxxxxxx
<body>
<svg viewBox="-10 -5 220 200" preserveAspectRatio="xMidYMin meet" ; style="position:fixed; top:0;">
<rect x="-5" y="0" width="210" height="100" rx="5" />
<rect x="0" y="100" width="205" height="100" />
<path id="roof" />
<path id="floor" />
</svg>
CSS (SCSS)
CSS (SCSS)
:root{--one:#111;
--two:#c00;
}
body{background-color: var(--one); margin:0}svg{height: 100vh; width: 100%; display:block;}
rect[y="0"]{fill:var(--two)}rect[y="100"]{fill:var(--one)}path{transition: 3s cubic-bezier(.3,.2,.1,1.2); fill:none; stroke:var(--two); stroke-width: 10; stroke-linejoin:round; stroke-linecap:round;}
#floor{stroke:var(--one); }xxxxxxxxxx
// tiny-as random min-max function
function rMe(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);
}
// grap my path
let roof = document.getElementById("roof");
let floor = document.getElementById("floor");function randomWaves() {roof.setAttribute(
"d",
"M 0 5 V" +
rMe(100, 110) +
" M 20 5 V" +
rMe(100, 120) +
" M 40 5 V" +
rMe(100, 130) +
" M 60 5 V" +
rMe(100, 150) +
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK