Skip to content

Commit

Permalink
optimize animation (#1173)
Browse files Browse the repository at this point in the history 
* use single multipath mask on a single gradient shape
* perlin noise to own file
* adjust timing
  • Loading branch information
@turbocrime
turbocrime authored May 27, 2024
1 parent 8ccaf30 commit 8a3b442
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 331 deletions.
5 changes: 5 additions & 0 deletions .changeset/rude-peaches-dream.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@penumbra-zone/ui': patch
---

optimize animation
280 changes: 26 additions & 254 deletions packages/ui/components/ui/logo/animated-penumbra.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import { useEffect } from 'react';
import {
animateTheta,
extractViewBoxDimensions,
initializePlotsArr,
permutation,
} from './animation-logic';
import { animateTheta, extractViewBoxDimensions, initializePlotsArr } from './animation-logic';

// React component version of animated-penumbra.svg
export const AnimatedPenumbra = ({ className }: { className: string }) => {
Expand All @@ -13,14 +8,8 @@ export const AnimatedPenumbra = ({ className }: { className: string }) => {
const noiseIntensityFactor = coordinateCentrePoint * 0.0014;
const plots = initializePlotsArr(noiseIntensityFactor);

const p = new Array<number>(512);
for (let i = 0; i < 256; i++) {
p[i] = permutation[i]!;
p[256 + i] = permutation[i]!;
}

// Start the theta animation. Returns the cleanup function that cancels the animation.
return animateTheta(plots, coordinateCentrePoint, p);
return animateTheta(plots, coordinateCentrePoint);
}, []);

return (
Expand All @@ -41,249 +30,32 @@ export const AnimatedPenumbra = ({ className }: { className: string }) => {
<stop offset='67%' style={{ stopColor: '#f77e14', stopOpacity: 1 }} />
<stop offset='87%' style={{ stopColor: '#8be4d9', stopOpacity: 1 }} />
</radialGradient>
<mask id='plot1Mask'>
<path
id='plot1'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot2Mask'>
<path
id='plot2'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot3Mask'>
<path
id='plot3'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot4Mask'>
<path
id='plot4'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot5Mask'>
<path
id='plot5'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot6Mask'>
<path
id='plot6'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot7Mask'>
<path
id='plot7'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot8Mask'>
<path
id='plot8'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot9Mask'>
<path
id='plot9'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot10Mask'>
<path
id='plot10'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot11Mask'>
<path
id='plot11'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot12Mask'>
<path
id='plot12'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot13Mask'>
<path
id='plot13'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot14Mask'>
<path
id='plot14'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot15Mask'>
<path
id='plot15'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot16Mask'>
<path
id='plot16'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot17Mask'>
<path
id='plot17'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot18Mask'>
<path
id='plot18'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot19Mask'>
<path
id='plot19'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot20Mask'>
<path
id='plot20'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot21Mask'>
<path
id='plot21'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
</mask>
<mask id='plot22Mask'>
<path
id='plot22'
fill='#fff'
stroke='#fff'
strokeWidth='0.25'
fillRule='evenodd'
filter='url(#shiny-filter)'
/>
<mask id='gradMask' fill='#fff' stroke='#fff' strokeWidth='0.25' fillRule='evenodd'>
<path id='plot1' />
<path id='plot2' />
<path id='plot3' />
<path id='plot4' />
<path id='plot5' />
<path id='plot6' />
<path id='plot7' />
<path id='plot8' />
<path id='plot9' />
<path id='plot10' />
<path id='plot11' />
<path id='plot12' />
<path id='plot13' />
<path id='plot14' />
<path id='plot15' />
<path id='plot16' />
<path id='plot17' />
<path id='plot18' />
<path id='plot19' />
<path id='plot20' />
<path id='plot21' />
<path id='plot22' />
</mask>
</defs>
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot1Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot2Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot3Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot4Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot5Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot6Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot7Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot8Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot9Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot10Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot11Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot12Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot13Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot14Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot15Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot16Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot17Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot18Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot19Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot20Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot21Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#plot22Mask)' />
<rect width='100%' height='100%' fill='url(#grad1)' mask='url(#gradMask)' />
</svg>
);
};
Loading

0 comments on commit 8a3b442

Please sign in to comment.