🏠 back to Observable

Trouble with importing a cell

I made a notebook with a Canvas animation: https://observablehq.com/@harrystevens/snowfall

When I try to import the snowfall cell into another notebook (e.g. https://observablehq.com/d/1af87e7bef1f08fe), the animation does not appear in the Canvas.

What am I doing wrong here?

Thanks.

Hey Harry,

That animation is white snowflakes on a blue gradient background, and the gradient is set by a separate cell that provides an html <style> element. The second notebook is importing the canvas, but not the associated style cell, so it’s animating white snowflakes on a white background, so it appears blank.

You can fix this by either naming the style cell, importing it, and referring to it in the second notebook, or setting the style in the same cell as you set the animation, like

canvas.style.background = 'linear-gradient(#000fff, #888fff, #aaafff)';
1 Like