[refractive] ImageData is not defined

### Describe the bug This error occurs because `@hashintel/refractive` relies on the browser's Canvas API (specifically the `ImageData` constructor), which does not exist in the Node.js environment where Next.js performs Server-Side Rendering (SSR). The library is trying to calculate a displacement map or rounded square map during the initial server-side render, but `ImageData` is a Web API only available in actual browsers. ``` Runtime Error ImageData is not defined Call Stack node_modules\@hashintel\refractive\src\maps\calculate-rounded-square-map.ts (74:21) node_modules\@hashintel\refractive\src\maps\displacement-map.ts (72:10) node_modules\@hashintel\refractive\src\components\filter.tsx (81:27) ``` https://github.com/hashintel/hash/blob/b03f6fe875220edd0f01ae4626ed223d3cf663ed/libs/%40hashintel/refractive/src/maps/calculate-rounded-square-map.ts#L74 ### To reproduce [refractive-ssr-bug.zip](https://github.com/user-attachments/files/26561926/refractive-ssr-bug.zip) 1. unzip 2. `npm install` 3. `npm run dev` 4. open in browser 5. see error in dev panel and in terminal ### Expected behavior No errors ### Device _No response_ ### Operating system Windows 11 ### Browser Chrome latest ### Additional context I think, computation of svg filter should happen on client side, inside `useEffect`. This will move all logic to client, and will not do any work on server side. Also, computations produce massive images (200kb+), and computing a few, on server side, will blow up html size.