css-doodle/samples/circles.html

35 lines
722 B
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
html, body { height: 100%; margin: 0; padding: 0;}
body { overflow: hidden; }
body { display: flex; align-items: center; justify-content: center }
</style>
<script src="../css-doodle.js"></script>
</head>
<body>
<div>
<css-doodle grid="6">
:doodle {
width: 50vh;
height: 50vh;
border-radius: 50%;
overflow: hidden;
background: #fafff1;
}
--size: @rand(200%);
width: var(--size);
height: var(--size);
border-radius: 50%;
background: hsla(
@rand(360), 80%, 50%, @rand(.8)
);
</css-doodle>
</div>
</body>
</html>