update([code])
Re-render the doodle with a new random seed, optionally replacing its code.
Syntax
- doodle.update([code])
- code
- New doodle code as a string. When omitted the current code is used again.
When the grid size and the content of the cells are unchanged the existing cell elements are kept and only the styles are replaced, so CSS transitions run between the old and new values. Otherwise the grid is rebuilt. The beforeUpdate, render, afterUpdate and update events are dispatched around it.
Examples
const doodle = document.querySelector('css-doodle');
// re-render with the same code
doodle.update();
// replace the code
doodle.update(`
@grid: 6 / 60vmin;
background: @p(#000, #e6437d);
`);Update on a timer, with transitions between renders:
<css-doodle auto:update="1.5s">
@grid: 6 / 60vmin _2px;
background: #000;
transition: .8s;
scale: @r(.3, 1);
rotate: @r(360deg);
border-radius: @p(0, 50%);
</css-doodle>