4
SVG generative mountain ridge dividers - Final
source link: https://codepen.io/accudio/pen/VwyRjaj
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
<div id="result"></div>
<div class="content">
<button id="regen">Regenerate</button>
</div>
<div class="filler"></div>
CSS (SCSS)
CSS (SCSS)
$bg: #a497c5;
body {display: grid;
grid-template-rows: 1fr auto auto 1fr;
min-height: 100vh;
background: $bg;
color: #2e2c40;
font-size: 24px;
}
#result {grid-row: 2;
}
svg {display: block;
}
.content {background: currentColor;
grid-row: 3;
padding-top: 4rem;
xxxxxxxxxx
const WIDTH = 1000
const HEIGHT = 100
const ITERATIONS = 6
const ROUGHNESS = 0.8
generate()
document.getElementById('regen').addEventListener('click', generate)
async function generate() { const dividerSvg = await divider('') document.getElementById('result').innerHTML = dividerSvg}
// mountain divider
async function divider(classes) {const segments = Math.pow(2, ITERATIONS)
const points = line(WIDTH, displaceMap(HEIGHT, HEIGHT / 4, ROUGHNESS, segments))
const path = convertPath(WIDTH, HEIGHT, points)
const svg = genSvg(WIDTH, HEIGHT, path)
return `
<div class="b-divider ${classes}" role="img" aria-hidden="true">Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK