ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styles and blast

Browse Source
This commit is contained in:
ntr
2019-07-24 12:04:18 +10:00
parent 16c83a529b
commit 9dc840765c
8 changed files with 45 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/anims/blast.jsx
+13 -18
View File
@@ -42,23 +42,18 @@ class Blast extends Component {
transform-box='fill-box'
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<defs>
<filter id="blastFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g>
{times(50, () => (
<g>
<rect filter="url(#blastFilter)" class="blue" x="150" y="200" width="3" height="5" />
<rect filter="url(#blastFilter)" class="white" x="150" y="200" width="1" height="3" />
</g>
))}
</g>
{times(50, () => (
<g>
<rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="2" height="2" />
<rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="1" height="1" />
</g>
))}
{times(50, () => (
<g>
<rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="3" height="3" />
<rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="2" height="2" />
</g>
))}
</svg>
);
}
@@ -76,7 +71,7 @@ class Blast extends Component {
this.animations.push(anime({
targets: ['#blast g'],
transform: () => `
translate(${anime.random(-100, 100)} ${anime.random(-100, 100)})
translate(${anime.random(-150, 150)} ${anime.random(-150, 150)})
`,
style: { rotate: anime.random(-180, 180) },
easing: 'easeOutCubic',