The Embedded Economy model is central to the progressive economic theory laid out by Kate Raworth in her book Doughnut Economics. Kate Raworth is a systems thinker with a talent for communicating her ideas visually. But the diagram of the Embedded Economy model has not entered the public consciousness to the extent that it deserves, arguably because of the success of another of her visualisations – the Doughnut itself, which is proving its worth both for capturing attention and as a tool help communities, organisations and cities implement some of the practices of Doughnut Economics.

Comparing the two images on the right, the Doughnut is more visually arresting than the Embedded Economy and that’s largely due to the fact that the Doughnut uses colour. If you trawl the web for images of the Embedded Economy model you will rarely find it represented in anything other than black and white. That may be, in part, due to the fact that the Embedded Economy was designed in opposition to the model that pervades almost all conventional economic theory and teaching – the Circular Flow model. As Kate Raworth explains in Doughnut Economics, the Circular Flow model was initially created to represent how money flows through the economy, but it soon came to be used to represent the entire economy. To facilitate comparison with the Circular Flow model – also usually represented in black and white, especially in the academic literature – the Embedded Economy model often needs to be represented in black and white.

But for some audiences – especially those who are not academic economists – colour would serve to make the Embedded Economy model more engaging. With that in mind I decided to make an SVG (scalable vector graphics) version of the Embedded Economy model diagram. The SVG format has a couple of advantages over bitmap image formats like JPEG:

1. It is scalable, which means that as you display an SVG in larger formats, it does not pixelate.
2. In web pages, individual elements of the image can be targeted for styling (e.g. changing colour or opacity) using web technologies like CSS (cascading style sheets) and Javascript.

The image of the Embedded Economy on the right uses the new SVG I created. You can access this SVG file directly by downloading it here. Why might you want to use this in preference to the JPEG version? Firstly you may have a need for a version that displays well in a very large format. Secondly you may be a web developer who wants to display the model on a web page and apply some custom styling on it.

But since most people do not have knowledge of web technologies, I also created an interactive online tool that allows anyone to change the colours and/or opacities of any model elements to create a new image which can be downloaded and used as required.

Create your own custom styled Embedded Economy model diagram: interactive online tool.

There are full instructions on how to use the tool on the page itself. With a little practice, generating images can become very fast indeed. Once you have used the tool to apply the custom styles you want, you can choose to download the the resulting image either as an SVG or a standard bitmap format – PNG. The former is ideal for using on websites and the latter in other tools like MS Word. I used the interactive tool to generate all of the images below. (The animations were not created using the interactive tool – see below for more details.)

This group of images could be used to help explain the different regions of the Embedded Economy model. They were all created by selecting the elements not required on each chart and setting them to ‘transparent’.

The images below show some other ways of highlighting parts of the model. In the first, instead of using transparency to completely remove the elements which are not required, they have been faded out by setting a low opacity value. In the second, colours have been used to highlight the elements of interest.

The five images above are all PNG bitmaps created using the interactive tool. The two remaining examples below both use an images created using the interactive tool, but in this case it was downloaded as an SVG – firstly because I wanted to display them in a large format and secondly because, in the second example, I wanted to add some animation using CSS applied to this web page.

Finally the example below using the same SVG as displayed above, with the addition of some CSS (which is shown below the image for those interested).

/* Change colour of financial flows arrows */
#dnjs-economy-flow-arrows {
  stroke: blue;
}

/* Rotating financial flows */
#dnjs-economy-flow-arrows {
  animation:spin 4s linear infinite;
}
@keyframes spin { 
  100% { 
    transform:rotate(360deg); 
  } 
}
/* Energy flow animations */
#animated-svg #dnjs-energy-flows,
#animated-svg #dnjs-energy-flow-text
{
  animation:flow 3s linear infinite;
}
@keyframes flow { 
  100% { 
    transform:translate(60px, 0px); 
  } 
}