https://codepen.io/tuckermassad/pen/rPYNLq
I took the CSS doodle code from the above link and incorporated it into my angular component:
<section class="main">
<css-doodle grid="5">
:doodle {
@grid: 10 / 100%;
}
background: @pick(
#ff0198, #8156a8, #ff6d00, #ff75e4
);
transform: translate(
@rand(-50vw, 50vw),
@rand(-50vh, 50vh)
);
@size: 3.5vmin;
@shape: heart;
@place-cell: 50% 50%;
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
</css-doodle>
</section>
After that, I installed css-doodle using npm i css-doodle, and when I ran the project, I encountered the following error:
compiler.js:2547 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
}
</css-doodle>
</section>[ERROR ->]"): ng:///AppModule/HomeComponent.html@32:10
Invalid ICU message. Missing '}'. ("
}
background: @pick(
#ff0198, #8156a8, [ERROR ->]#ff6d00, #ff75e4
);
"): ng:///AppModule/HomeComponent.html@6:28
Invalid ICU message. Missing '}'. ("
}
</css-doodle>
</section>[ERROR ->]"): ng:///AppModule/HomeComponent.html@32:10
Does anyone know how to effectively use css doodle in angular?