
I ran an experiment to see how different creative assets for web development consume power on an Apple laptop. The following chart shows the mW power consumption for these assets, used on a webpage in isolation, measured over the course of 10 seconds. I ran the test three times then took the average of the results (there was little to no variation in measured values between runs).

![A bar chart demonstrating that Firefox and Chrome consume different levels of power consumption for different creative assets.](/images/investigate-power-consumption/ff-chrome-creative-assets.svg)

Bizarrely, the YouTube embed for Chrome consumes much more power than than of Firefox, even more than an animated WebGL Three.js scene. I tested the YouTube embed power consumption across further browsers, and confirmed that this is specific to Chrome.

![Chrome consumed about ten times as much power as any of the other browsers.](/images/investigate-power-consumption/youtube-embed-energy-usage.svg)

I don't know why Chrome acts this way around the YouTube embed. I have noticed that when running tests against multiple YouTube embeds using Playwright, Chrome will cause other embeds on the page to vanish when they are not within the immediate viewport, which other browsers don't do. There is some custom code in Chrome that handles these iFrames differently.

## Methodology

If you'd like to test power consumption of a process on your own MacOS or Linux device, you can use the following guide.

Close all other applications apart from your chosen browser and a terminal instance. Make sure you are testing using an incognito window that has no active extensions.

Load the website to be tested, then run the `powermetrics` command line tool in the terminal with the following command:

`sudo powermetrics –samplers tasks –show-process-coalition –show-process-gpu -n 1 -i 10000`

Then, take the average of three runs of the CPU and GPU energy consumption. Your results should be quite consistent across the three runs, otherwise it may be that a different process has affected the power consumption.


Findings on how much power is consumed by different web assets on a MacOS device.

Power consumption of creative web assets


Shadowbox is made of two parts: a web crawler to collect data about your site, and a Next.js app to display the results in a report.

You can view an example report here, [an overview of 259 pages hosted on torchbox.com](https://tbx-shadowbox.vercel.app/fad8073d). The source code for this project [is available on GitHub](https://github.com/jhancock532/shadowbox/tree/main).

## Features

The report provides statistics on the sites performance as well as individual webpages. You can take multiple reports of a site at different times, and select which one to view from the dropdowns at the top of the page.

![The homepage of shadowbox, including a logo, dropdowns for selecting reports to view, a main title saying website overview, and some key statistics such as median page weight and average image page weight](/images/shadowbox/main-light.webp)

As well as key statistics, the report will offer recommendations in several areas relating to sustainability, such as using more efficient file formats for your images, or using fewer iFrames and font files.

![A chart showing the different file types of images used across the site and how much data it took to download that type of image in total](/images/shadowbox/image-overview.webp)

As well as showing key sustainability indicators, the report highlights problematic pages from across the site in a 'Largest webpages by resource size' chart.

![A stacked bar chart of webpage network request sizes for webpages in descending order. Where the cursor is hovering more information about that bar chart element is showing.](/images/shadowbox/resource-hover.webp)

You can peek information about what resources are taking up the most space by hovering over segments of each bar. To view more information about a page, click on the bar in the chart or scroll down to the report metadata section.

![A list of webpage urls underneath a title reading Report Metadata](/images/shadowbox/list-of-pages.webp)

Individual page reports include recommendations on how to improve the images and fonts used to load the page as well as a full list of all network requests, ordered by size.

![The individual page network requests report, showing that the largest element on the page is a YouTube iframe, which took 3MB to download.](/images/shadowbox/network-requests.webp)

Where relevant, there's an additional report that covers any iFrame content loaded into that page.

![A small bar chart showing how much (in kilobytes) an iFrame loaded into the analyzed page takes to load. The network request sizes have been totalled and separated into categories such as images, fonts, scripts, styles, etc.](/images/shadowbox/iframe-breakdown.webp)

Shadowbox also includes support for dark mode and the feature to compare the previous reports with future reports, distinguished by a different color scheme.

![The top of a Shadowbox report overview page with a dark background. There are key statistics about page weight, with values from a past report compared with a current one. The current report is distinguished with a bright gradient color scheme.](/images/shadowbox/main-dark.webp)

The comparison feature applies across the site, including in the individual page report. If webpage urls have changed, no compared data is shown for that page.

![The top of a Shadowbox report individual page with a light background. There is a large title stating this report is about the team page, and a chart showing the compared report uses slightly larger images.](/images/shadowbox/page-comparison.webp)

## Technical details

### The crawler

URLs of the site are gathered and navigated from a single root URL using [Crawlee](https://crawlee.dev/). Crawlee manages the use of [Puppeteer](https://pptr.dev/), which controls the browser visiting each webpage.

The first thing the crawler does when visiting a webpage is scroll to the bottom of that page, rendering any lazy loaded content. When the crawler detects an iFrame, it gets added to a queue of sites to crawl after the main run. The iFrame is then factored into the total resource size for that page.

The data collected while crawling is processed and stored in JSON files. These files are committed directly to the repository, then are later read and displayed by the Next.js app.

If you'd like to try running the crawler for yourself, I've added instructions [in the GitHub repositories readme](https://github.com/jhancock532/shadowbox/tree/main?tab=readme-ov-file#running-the-crawler).

### Data processing

This project had some difficulty gathering realistic network request transfer sizes. The Web API that returns these values (`window.performance.getEntries()`) frequently gave an incorrect or missing file size.

To resolve this problem, an additional script runs after the main site crawl to download every network request, calculating their sizes. This creates a dictionary of request sizes that can be referred to when calculating total page weights or listing all the requests for an individual page.

After all the data exploration and downloading has been completed (gathering pages, iframes and network resource sizes), all of the data for the run is assigned to a report id and stored under that report id in the file system. The folder structure is as follows:

- /[report-id]
  - iframeRequestSizes.json
  - iframes.json
  - metadata.json
  - networkRequestsSummary.json
  - requestSizes.json
  - /[page-id]
    - networkRequests.json
    - pageMetadata.json

Each page folder contains network request information and basic metadata useful for the report, such as its id and url information. For the JSON files that are direct children of the report folder,

- `requestSizes.json` and `iframeRequestSizes.json` contain all the network requests made while crawling the site and their accurate size. These files are referred to when creating the network request summary and page network request lists.
- `networkRequestSummary.json` contains all the data to be displayed on the report overview page, with network request sizes tallied by asset type for convenience.
- `iframes.json` contains the iFrame data that is fed into individual page reports
- `metadata.json` stores a list of URLs mapped to their page ids in a file, as well as some information about the site crawl itself.

### The Next.js report

This report has been built with Next.js v14 using the app router, with all pages rendered server side. This architecture, and especially the use of CSS color variables when adding dark mode, was inspired by [Josh W. Comeau's Joy of React course](https://courses.joshwcomeau.com/joy-of-react). All charts, components, styles added are custom made.

The report comparison feature has had a large impact on how components for this site have been built. All charts and data visualization elements are able to accept two data input props, and can safely render one or both at the same time.

A cookie is set and removed with the compared report id when the report comparison dropdown is toggled. The server reads this cookie before rendering the page so it knows what report data to return. Otherwise, the server knows what report and page to render by referring to the url params. This follows the syntax of /[report-id]/[page-id].

## Room for improvement

The GitHub repository is presented as a somewhat functional minimum viable product. Some important limitations to consider before using the code include:

- This software has several known bugs still to be patched, including the inability to detect `.webp` images that have been sent with a `.png` filename.

- The crawler won't run against a site that has rate limiting protections from two many requests. There should be a configuration option to run the crawler at a slower or custom rate.

- Webpages with query parameters but identical paths to a previous page are currently being crawled instead of ignored. The same applies for webpages with id hashes, e.g. `/#main-content`

- The crawler has only been regularly tested on one or two sites, which doesn't reflect the broad diversity of website contents online. It's likely that some bugs will appear testing against a new site.

I'm happy to accept merge requests for bug fixes or new features, or otherwise help you with any issues you have when testing out the repository.

## Acknowledgments

Helping with the design of the project, [Millie Bowie](https://torchbox.com/team/millie-bowie/) provided advice regarding data visualization techniques and colors. Millie also suggested the name of this project, Shadowbox.

Thanks go to the wider developer community for creating NPM packages `crawlee` and `next` (alongside countless other dependencies), as well as [Josh W. Comeau's Joy of React course](https://courses.joshwcomeau.com/joy-of-react) whose Next.js tutorials I followed while creating this site.


An open source project to audit website sustainability.

Introducing Shadowbox


Command to convert any size of png file to a webp file with a max size of 100kB:

```bash
cwebp -size 100000 input.png -o output.webp
```

Would be nice to set a max size limit in Next.js when loading images automatically...


A command line snippet to convert to a preferred size of WebP file.

Convert to WebP on a Budget


This page takes examples from the [Awesome SVG repository](https://github.com/willianjusten/awesome-svg) and displays them visually so you can be inspired for your next project. I've also added some caveats for using the effects where appropriate.

## SVG paths

### Draw a line with stroke-dash-offset

A CSS only technique, demo by [Michael Gilbertson](https://codepen.io/mggwxyz/pen/dVKPZV).

<iframe
  height="500"
  width="100%"
  scrolling="no"
  title="DC Metro Lines Map (Animated SVG Path)"
  src="https://codepen.io/mggwxyz/embed/dVKPZV?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

A common technique that uses SVG's powerful `stroke-dash` functionality. You can make a stroke dash the same size as the whole line itself, then animate where the stroke begins on the line, drawing or erasing the line.

### Draw a line with basic JavaScript

A JavaScript technique. Demo by [James Hancock](https://codepen.io/jhancock532/pen/xxzqVbK).

<iframe
  height="350"
  width="100%"
  scrolling="no"
  title="SVG Arrow Animation"
  src="https://codepen.io/jhancock532/embed/xxzqVbK?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

Use the SVG line drawing API directly to show line progression.

### Reveal an object using a clipPath with `<animate attributeName="d">`.

Demo by [Heather Buchel](https://codepen.io/hbuchel/pen/YzYMgd?editors=0100).

<iframe
  height="550"
  width="100%"
  scrolling="no"
  title="Loading Animation with Morphing SVG!"
  src="https://codepen.io/hbuchel/embed/YzYMgd?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

No JS, little CSS required. You could apply this clip path to DOM elements outside of the SVG [via a CSS id reference](https://codepen.io/jhancock532/pen/RwLwwNx?editors=0100). Configuring the path animation to be exactly how you like it will take either creative tools or some careful planning. Doesn't seem easy to activate on hover either, some eldritch combination of a JS event & recreating the SVG node might do it?

### Create a wobbly [TextPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath)

A demo using the above path animation technique, applied instead to a `<textPath>`. By [James Hancock](https://codepen.io/jhancock532/pen/PoLmzoN?editors=1000).

<iframe
  height="300"
  width="100%"
  scrolling="no"
  title="Link + Text Path Wiggle"
  src="https://codepen.io/jhancock532/embed/PoLmzoN?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

## SVG filters

Filters create incredibly powerful visual effects, with the caveat that they can display and perform differently across browsers when you experiment with more complex features. Layering several SVG filters will often have a significant impact to the performance of your browser if you attempt to animate the result. From testing on an M1 Macbook, Chrome can render layered SVG filters with little power, but Safari and Firefox use 10 to 20 times more energy.

- [A handy user interface to experiment with combining filters](https://yoksel.github.io/svg-filters/#/) ([and one just for color effects](https://yoksel.github.io/svg-gradient-map/#/)).
- [A blog with a demonstration of all possible filter effects in action](https://blog.logrocket.com/complete-guide-using-css-filters-svgs/)

### Animated depth of field effect

Demo by [Vaughan Curd](https://codepen.io/vcurd/pen/DoNymG?editors=0010).

<iframe
  height="600"
  width="100%"
  scrolling="no"
  title="Depth of field effect with SVG filters"
  src="https://codepen.io/vcurd/embed/DoNymG?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

Layering blur filters, revealing then hiding different parts of a scene on hover. Can be achieved without SVG via CSS `filter: blur(1px);` rules, but you could use other SVG filters here instead.

### Animated filter effects

- Animate your filter values to create a [glitch effect](https://codepen.io/lbebber/details/qEjRYd/)
- Or [a digital disruption noise effect](https://aaadaaam.com/?utm_source=ownyourweb&utm_medium=email&utm_campaign=issue-07)
- Or [a smooth animated water background effect](https://codepen.io/oscar-jite/pen/XWZgYBP)

- doesn't run well on Safari at all (graphical glitches)
- horrible performance on Firefox when used at full screen, really intensive power usage
- could make for a nice one-off text wobble effect? Test on Safari!
- doesn't use as much CPU when run in a smaller effect area

Note that you could animate dynamic lighting using an SVG as well (point light and spotlight variations)

SVG clip text - https://codepen.io/jhancock532/pen/bGRPWPK?editors=1000

## Other SVG effects

### Use generative design to create a unique background

Demo [by Alex Trost](https://codepen.io/a-trost/pen/rNGPxaJ).

<iframe
  height="500"
  width="100%"
  scrolling="no"
  title="Generative Grid"
  src="https://codepen.io/a-trost/embed/rNGPxaJ?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

Alex has created a full tutorial for this effect on [frontend.horse](https://frontend.horse/articles/generative-grids/).

### Overlay a mask onto your SVG to add texture

Demo [by Tom Miller](https://codepen.io/creativeocean/pen/abLGMwv?editors=0010)

<iframe
  height="600"
  width="100%"
  scrolling="no"
  title="Silkscreen Squiggles"
  src="https://codepen.io/creativeocean/embed/abLGMwv?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

Using JavaScript to build up a grid of SVG shapes. Alex Trost has created a breakdown of this effect on [frontend.horse](https://frontend.horse/articles/painting-svg-paths-with-masks/).

### Animate the SVG viewbox to move over an image, zoom in and out.

Demo [by David Bachmann Johannesson](https://codepen.io/dbj/pen/RWmQNJ)

<iframe
  height="400"
  width="100%"
  scrolling="no"
  title="Animating the viewbox"
  src="https://codepen.io/dbj/embed/RWmQNJ?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

### Using `preserveAspectRatio="xMidYMid slice"` and simple animations for a responsive background

Demo [by Ksenia Kondrashova](https://codepen.io/ksenia-k/pen/jXbWaJ?editors=1000)

<iframe
  height="400"
  width="100%"
  scrolling="no"
  title="2kb total size SVG animation"
  src="https://codepen.io/ksenia-k/embed/jXbWaJ?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

### Tools

- [SVG path editor](https://yqnn.github.io/svg-path-editor/): Free access, allows manual editing of the path string & also drag and drop of the SVG path points.

### Other inspiration

- [https://a.singlediv.com/](https://a.singlediv.com/) by [Lynn Fisher](https://lynnandtonic.com/). A lot of what's created on this site doesn't use SVG directly, rather `background-image`. However, there are a lot of cool creative implementations using not a lot of code.

If you're wondering how SVG can be used responsively, check out this clever board game journey implementation: https://react.gg/

An SVG is basically just a bunch of divs with transforms applied. Animate their appearance using GSAP and scroll.

<iframe
  height="500"
  width="100%"
  scrolling="no"
  title="Scrolling rainbow - GSAP ScrollTrigger &amp; ScrollSmoother"
  src="https://codepen.io/supah/embed/MWroVZG?default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

## AI generated SVG images

For best results, prompt your image generation with SVG, woodcut, graphic design, etc.

For black and white SVG cutouts:

- "A linocut style black and white woodcut image of a medium size golden retriever dog sleeping in a plain cosy dog bed against a white background, no color and large blocky woodcut strokes" (DALLE 3 handled this quite well)
- Consider using Stable Diffusion 1.5 and the print graphic Lora locally - https://civitai.com/models/34903/print-graphic
- Edit the photo with a free photo editor to get rid of any generation mistakes.
- [Use Adobe's SVG convertor to make it an SVG](https://www.adobe.com/express/feature/image/convert/svg).
- [Use the Neo color editor to adjust the colors](https://neosvg.com/tools/svg-color-editor) if you are particular about the SVG matching a color scheme.
- Use the SVG OMG optimizer or https://vecta.io/nano to polish the result. Or both!

![A woodcut illustration of a dog snoozing in a basket.](/images/svg/sleeping-dog.svg)

### August 2024 Update

Use Flux to generate the image (can work well even without a Lora)

If you don't need multiple colors, avoid Adobe's SVG converter in favour of https://picsvg.com/


A collection of ideas, methods and tools.

Creative use of SVGs in web development


## Aims

Create a set of map tiles with custom colors, borders, fonts, etc, and host it on GitHub for use in personal projects.

- Design a map on Mapbox (or import map styles to Mapbox from another tool)
- Download the map tiles using a Python script
- Host the map on GitHub

Bonus: demo your new map tiles in action using Leaflet.js.

### Limitations

- This process works best for maps that have limited scope and zoom levels (e.g. a single country with high zoom detail, or the entire world with low zoom detail). This is because the more map tiles you export, the quicker you'll run out of free Mapbox API credits & increasing your zoom levels exponentially increases your API usage.
- If you choose to host the map on GitHub, anyone else will be able to use it as it is available publicly. Consider using a different hosting solution if you'd like the map to be private / only accessible with authentication.
- The map will not update with new chartography data unless you re-export it from Mapbox.

### Alternatives

- [TileMill](https://wiki.openstreetmap.org/wiki/TileMill) - ran locally, requires PostgreSQL / Node, doesn't have the Mapbox styling interface. I've not investigated this one yet as it looks a fair bit older.
- [QGIS](https://qgis.org/en/site/) - you can import MapBox maps into this software, then use QTiles to export them as tiles again. However, the image quality is reduced and random tiles will have a single pixel white line drawn vertically through them. There's not a noticeable improvement in tile download speed, and the map typography doesn't scale well (seems twice as small as it should be). QGIS + QTiles might work better with map styles not imported from Mapbox, however I've not yet tested to confirm this.

## Requirements

You'll need a Mapbox account that hasn't reached its free tier API limits, a GitHub account, and a computer that can run Python scripts.

## Instructions

### Design a map on Mapbox

If you don't have a Mapbox account, [sign up for one](https://account.mapbox.com/auth/signup/).

Next, navigate to [Mapbox studio](https://studio.mapbox.com/), and create a new map style.

If you're new to Mapbox, I'd recommend creating a new map style based on an image - this will set a lot of the color options for you, saving you some effort setting up.

![Creating a new map style based on a photo upload tool. There are five minor UI elements the user can drag around to change the color of their final map.](/images/create-your-own-map/mapbox-style-with-image.webp)

Click customize to continue and edit the map style further.

To change the colors of elements on the map, click on that element. You may then have to navigate to the specific item within the layer you'd like to change the color of (e.g. changing the base color of landuse won't change all the land colors - scroll through the options to find the specific class of land use color you'd like to change).

![The land use colors are determined with a lot of different options, such as "park", "wood", "glacier", etc. The map is displayed to the right showcasing the current settings.](/images/create-your-own-map/adjust-land-use-colors.webp)

Typography for the map can be updated in a similar way, by clicking on the map titles. Make sure to zoom in and out so you update titles and map colors that only render at certain zoom levels.

![A popup beneath a map title shows color options and also font choices.](/images/create-your-own-map/adjust-typography.webp)

Consider following [further Mapbox tutorials](https://docs.mapbox.com/help/how-to-videos/) to familiarize yourself with the user interface and have greater control over how you customize the map.

Once you are happy with the map design, click the publish button in the top right.

To download the tiles, you'll need an API URL with your access token. To get this, click "Share" in the top right, then scroll down to developer resources. Select "Third party", then in the dropdown directly beneath, select "Fulcrum" and copy the integration URL provided by Mapbox.

![A large sharing popup window includes a smiling, waving cartoon figure, a demo of the map on the right and export options to the left.](/images/create-your-own-map/mapbox-export.webp)

N.B. Don't share this URL with anyone else! It contains an access token that counts towards your API usage, so other people who access your map via this URL will cost you your API credits.

### Calculate the bounds of your map tiles

We'll be querying Mapbox's API to download all of the map tiles within a desired range. I've written a basic Python script which iterates through the minimum and maximum tile co-ordinates for the section of the map, downloading each map image in turn, for a given set of zoom levels.

To work out the zoom levels, minimum and maximum x and y values, I've created a tool to help. You'll need two co-ordinate references, one for the top left corner of the map section, another for the bottom right.

<DemonstrationMap />

Note that you can get away with downloading one or two zoom levels less than your desired maximum by letting Leaflet scale the last zoom level images based on the previous, causing slightly pixelated map images.

### Run a script to download the tiles

Fork the [template repository](https://github.com/jhancock532/download-map-tiles) and change the initial variables in `get_tiles.py` with the map tile limits you'd like to download.

Follow the `readme.md` instructions for installation and downloading the map tiles. When you've downloaded your map tiles, commit them to the git repository.

Note that this download script only covers basic functionality, downloading tiles in sequence at about three per second. Feel free to create a MR to the template repository if you'd like to suggest a parallel solution or one with more error catching, etc.

Edit the `index.html` file so that the map tile URL points towards your GitHub account, and whatever you've named the repository.

```js
L.tileLayer(
  'https://{YOUR_USERNAME_HERE}.github.io/{REPOSITORY_NAME_HERE}/tiles/{z}/{x}/{y}.png',
  {
    minZoom: 1,
    maxNativeZoom: 2,
    maxZoom: 18,
    attribution:
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap | Mapbox</a>',
  },
).addTo(map);
```

This is also a great time to adjust the min and maximum zoom to match that of the tiles you've downloaded. If you'd like the user to be able to zoom in further than what your tiles allow, set the `maxNativeZoom` to your tiles zoom limit, then edit the `maxZoom` to be one or two numbers larger. This way the user can zoom in on your map slightly more to see the last set of tiles closer up.

You can set the bounds of the map (so the user doesn't accidentally scroll into the calm oblivion) as follows:

```js
const southWest = L.latLng(51.39, -2.417);
const northEast = L.latLng(51.53, -2.843);
const bounds = L.latLngBounds(southWest, northEast);

const map = L.map('map', { maxBounds: bounds }).setView(
  [51.44976, -2.59838], // set initial starting point
  12, // set initial zoom level
);
```

Commit and push the changes to GitHub, and activate GitHub Pages for your repository with the default settings.

Your website will shortly be live at `https://{YOUR_USERNAME_HERE}.github.io/{REPOSITORY_NAME_HERE}/`

Here's an example of a [completed GitHub repository](https://github.com/jhancock532/bristol-green-map/tree/main) and [`index.html` file](https://github.com/jhancock532/bristol-green-map/blob/main/index.html).

And here's [a live demo](https://jhancock532.github.io/bristol-green-map/) of the map I created using Mapbox & Leaflet.

<iframe
  src="https://jhancock532.github.io/bristol-green-map/"
  width="100%"
  height="500px"
/>

Thank you for reading!

If you have any questions, issues or suggestions, please leave a comment on this site's [GitHub repository](https://github.com/jhancock532/notes/discussions).


Create a custom map design for your website, and host it for free.

Coding