update([code])
Re-render the doodle, optionally replacing its code. It gets a new random seed unless a seed attribute or @seed fixes one.
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 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>