console
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>-</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta name="renderer" content="webkit">
<style>
.css-w {
width: 300px;
height: 600px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.doodz {
background: #fff;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="css-w">
<css-doodle class="doodz" click-to-update>
:doodle {
grid-gap: 1px;
background-color: #f5f5f5;
@grid: 2x20 / 100% 100%;
}
:after {
content: @rep15(@p([0-9]));
color: #fff;
font-family: Consolas;
}
@y1 {
@shape: triangle;
}
background-color: #09e;
transition: .5s;
</css-doodle>
</div>
<script src="https://cdn.jsdelivr.net/npm/css-doodle@0.13.4/css-doodle.min.js"></script>
</body>
</html>