diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 2448cfa5b..dc8796159 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -1,24 +1,24 @@
-# Bubbling and capturing
+# Bubbling og capturing
 
-Let's start with an example.
+Lad os starte med et eksempel.
 
-This handler is assigned to `<div>`, but also runs if you click any nested tag like `<em>` or `<code>`:
+Denne handler er tilknyttet `<div>`, men kører også, hvis du klikker på en hvilken som helst indlejret tag som `<em>` eller `<code>`:
 
 ```html autorun height=60
 <div onclick="alert('The handler!')">
-  <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em>
+  <em>Hvis du klikker på <code>EM</code>, vil den handler der er på <code>DIV</code> blive kørt.</em>
 </div>
 ```
 
-Isn't it a bit strange? Why does the handler on `<div>` run if the actual click was on `<em>`?
+Er det ikke lidt mærkeligt? Hvorfor kører handleren på `<div>` hvis det faktiske klik var på `<em>`?
 
 ## Bubbling
 
-The bubbling principle is simple.
+Princippet bag bubbling er simpelt.
 
-**When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.**
+**Når en event finder sted på et element, kører den først de handlers, der er tilknyttet elementet, derefter på dets forældre og så videre op til andre forældre.**
 
-Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of them:
+Lad os sige, at vi har 3 indlejrede elementer `FORM > DIV > P` med en handler på hvert af dem:
 
 ```html run autorun
 <style>
@@ -35,125 +35,125 @@ Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of t
 </form>
 ```
 
-A click on the inner `<p>` first runs `onclick`:
-1. On that `<p>`.
-2. Then on the outer `<div>`.
-3. Then on the outer `<form>`.
-4. And so on upwards till the `document` object.
+Et klik på det inderste `<p>` kører først `onclick`:
+1. på selve `<p>` elementet.
+2. Derefter på det omkringliggende `<div>` element.
+3. Derefter på det ydre `<form>` element.
+4. På den måde fortsætter kæden hele vejen op til `document` objektet.
 
 ![](event-order-bubbling.svg)
 
-So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
+Så hvis vi klikker på `<p>`, vil vi se 3 alerts: `p` -> `div` -> `form`.
 
-The process is called "bubbling", because events "bubble" from the inner element up through parents like a bubble in the water.
+Processen kaldes for "bubbling", fordi events "bobler op" fra det indre element op gennem forældre som bobler i vandet.
 
-```warn header="*Almost* all events bubble."
-The key word in this phrase is "almost".
+```warn header="*Næsten* alle events bobler."
+Det vigtigste ord i denne sætning er "næsten".
 
-For instance, a `focus` event does not bubble. There are other examples too, we'll meet them. But still it's an exception, rather than a rule, most events do bubble.
+For eksempel vil en `focus` event ikke boble. Der findes andre eksempler som vi skal se senere. Men det er mere undtagelsen en reglen - de fleste kan godt boble.
 ```
 
 ## event.target
 
-A handler on a parent element can always get the details about where it actually happened.
+En handler til et *omkransende element* kan altid få detaljer om det element, hvor det faktisk skete.
 
-**The most deeply nested element that caused the event is called a *target* element, accessible as `event.target`.**
+**Det dybeste element der startede kæden af events kaldes for *target* elementet, og kan fanges med `event.target`.**
 
-Note the differences from `this` (=`event.currentTarget`):
+Bemærk forskellen i forhold til `this` (=`event.currentTarget`):
 
-- `event.target` -- is the "target" element that initiated the event, it doesn't change through the bubbling process.
-- `this` -- is the "current" element, the one that has a currently running handler on it.
+- `event.target` -- er det "target" element der startede hele rækken af events - den ændrer sig ikke igennem bubbling processen.
+- `this` -- er det "aktuelle" element. Det element som har en aktuelt kørende handler på det.
 
-For instance, if we have a single handler `form.onclick`, then it can "catch" all clicks inside the form. No matter where the click happened, it bubbles up to `<form>` and runs the handler.
+Hvis vi for eksempel har en enkelt handler `form.onclick`, så kan den "opfange" alle klik der sker inde i formen. Lige gyldigt hvor klikket skete, vil det boble op til `<form>` og køre handleren.
 
-In `form.onclick` handler:
+I `form.onclick` handleren:
 
-- `this` (=`event.currentTarget`) is the `<form>` element, because the handler runs on it.
-- `event.target` is the actual element inside the form that was clicked.
+- `this` (=`event.currentTarget`) er selve `<form>` elementet, fordi handleren kører på det.
+- `event.target` er det faktiske element inde i formen, der blev klikket på.
 
-Check it out:
+Se f.eks. her:
 
 [codetabs height=220 src="bubble-target"]
 
-It's possible that `event.target` could equal `this` -- it happens when the click is made directly on the `<form>` element.
+Det er muligt for `event.target` at være det samme som `this` -- det sker når klikket gives direkte på `<form>` elementet.
 
-## Stopping bubbling
+## Stop bubbling
 
-A bubbling event goes from the target element straight up. Normally it goes upwards till `<html>`, and then to `document` object, and some events even reach `window`, calling all handlers on the path.
+En bubbling event går direkte fra det sted der klikkes på og op i en lige linje. Normalt vil det betyde, at det går opad gennem DOM'en til det rammer `<html>`, og derefter til `document` objekt ... nogle events fortsætter endda til `window` og kalder alle handlere på sin vej.
 
-But any handler may decide that the event has been fully processed and stop the bubbling.
+Men, hvilken som helst handler kan vælge at eventen er fuldt ud håndteret og stoppe muligheden for at andre handlere bliver kaldt.
 
-The method for it is `event.stopPropagation()`.
+Metoden til at gøre det er `event.stopPropagation()`.
 
-For instance, here `body.onclick` doesn't work if you click on `<button>`:
+For eksempel vil `body.onclick` ikke virke, hvis du klikker på `<button>`:
 
 ```html run autorun height=60
-<body onclick="alert(`the bubbling doesn't reach here`)">
-  <button onclick="event.stopPropagation()">Click me</button>
+<body onclick="alert(`Der bobles ikke op hertil`)">
+  <button onclick="event.stopPropagation()">Klik mig</button>
 </body>
 ```
 
 ```smart header="event.stopImmediatePropagation()"
-If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute.
+Hvis et element har flere event handlers på en enkelt event, så vil en handler, der kalder `event.stopPropagation()`, ikke forhindre andre handlers på samme element fra at køre.
 
-In other words, `event.stopPropagation()` stops the move upwards, but on the current element all other handlers will run.
+Med andre ord, `event.stopPropagation()` stopper bevægelsen opad, men aller handlers på det aktuelle element vil stadig køre.
 
-To stop the bubbling and prevent handlers on the current element from running, there's a method `event.stopImmediatePropagation()`. After it no other handlers execute.
+For at stoppe bubbling og forhindre handlers på det aktuelle element fra at køre, findes der en metode `event.stopImmediatePropagation()`. Efter denne kaldes ingen andre handlers.
 ```
 
-```warn header="Don't stop bubbling without a need!"
-Bubbling is convenient. Don't stop it without a real need: obvious and architecturally well thought out.
+```warn header="Lad være med at stoppe bubbling uden en grund!"
+Bubbling er praktisk. Lad være med at stoppe det uden en reel grund.
 
-Sometimes `event.stopPropagation()` creates hidden pitfalls that later may become problems.
+Nogle gange skaber `event.stopPropagation()` skjulte fælder der senere bliver til problemer.
 
-For instance:
+For eksempel:
 
-1. We create a nested menu. Each submenu handles clicks on its elements and calls `stopPropagation` so that the outer menu won't trigger.
-2. Later we decide to catch clicks on the whole window, to track users' behavior (where people click). Some analytic systems do that. Usually the code uses `document.addEventListener('click'…)` to catch all clicks.
-3. Our analytic won't work over the area where clicks are stopped by `stopPropagation`. Sadly, we've got a "dead zone".
+1. Vi opretter en indlejret menu. Hver undermenu håndterer klik på sine elementer og kalder `stopPropagation` så den ydre menu ikke vil blive udløst.
+2. Senere beslutter vi os for at fange klik på hele vinduet, for at spore brugernes adfærd (hvor folk klikker) - nogle analytiske systemer gør det. Normalt bruges koden `document.addEventListener('click'…)` til at fange alle klik.
+3. Løsningen vil ikke virke i området, hvor klik er stoppet af `stopPropagation` da der er en "død zone".
 
-There's usually no real need to prevent the bubbling. A task that seemingly requires that may be solved by other means. One of them is to use custom events, we'll cover them later. Also we can write our data into the `event` object in one handler and read it in another one, so we can pass to handlers on parents information about the processing below.
+Der er normalt intet reelt behov for at forhindre bubbling. En opgave der ser ud til at kræve det kan løses med andre midler. En af dem er at bruge tilpassede begivenheder, som vi vil dække senere. Vi kan også skrive vores data ind i `event` objektet i en handler og læse det i en anden handler. På den måde kan vi videregive information til handlers på forældre om behandlingen længere nede.
 ```
 
 
 ## Capturing
 
-There's another phase of event processing called "capturing". It is rarely used in real code, but sometimes can be useful.
+Der er en anden fase af event behandling kaldet "capturing" (tilfangetagelse på dansk). Den bruges sjældent i kode, men nogle gange kan den være nyttig.
 
-The standard [DOM Events](https://www.w3.org/TR/DOM-Level-3-Events/) describes 3 phases of event propagation:
+Standard [DOM Events](https://www.w3.org/TR/DOM-Level-3-Events/) beskriver 3 faser af event propagation:
 
-1. Capturing phase -- the event goes down to the element.
-2. Target phase -- the event reached the target element.
-3. Bubbling phase -- the event bubbles up from the element.
+1. Capturing phase -- når eventet dykker ned til elementet.
+2. Target phase -- eventet nåede målelementet.
+3. Bubbling phase -- eventet bobler op fra elementet.
 
-Here's the picture, taken from the specification, of the capturing `(1)`, target `(2)` and bubbling `(3)` phases for a click event on a `<td>` inside a table:
+Her er et billede, taget fra specifikationen, af de tre faser for et klik event på en `<td>` inde i en tabel:
 
 ![](eventflow.svg)
 
-That is: for a click on `<td>` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.
+Det vil sige: for et klik på `<td>` går eventet først gennem forældrekæden ned til elementet (capturing phase), derefter når det målet og udløser der (target phase), og så går det op (bubbling phase), hvor det kalder handlers på sin vej.
 
-Until now, we only talked about bubbling, because the capturing phase is rarely used.
+Indtil videre har vi kun talt om bubbling, fordi capturing fasen sjældent bruges.
 
-In fact, the capturing phase was invisible for us, because handlers added using `on<event>`-property or using HTML attributes or using two-argument `addEventListener(event, handler)` don't know anything about capturing, they only run on the 2nd and 3rd phases.
+I virkeligheden var capturing fasen usynlig for os, fordi handlers tilføjet ved hjælp af `on<event>`-egenskab eller ved hjælp af HTML-attriibutter eller ved hjælp af to-argument `addEventListener(event, handler)` ikke ved noget om capturing, de kører kun 2nd og 3de fase.
 
-To catch an event on the capturing phase, we need to set the handler `capture` option to `true`:
+For at fange et event i capturing fasen, skal vi sætte handlerens `capture` option til `true`:
 
 ```js
 elem.addEventListener(..., {capture: true})
 
-// or, just "true" is an alias to {capture: true}
+// eller bare "true" der er et alias til {capture: true}
 elem.addEventListener(..., true)
 ```
 
-There are two possible values of the `capture` option:
+Der er to mulige værdier for `capture` valget:
 
-- If it's `false` (default), then the handler is set on the bubbling phase.
-- If it's `true`, then the handler is set on the capturing phase.
+- Hvis det er `false` (standard), så er handleren sat på bubbling fasen.
+- Hvis det er `true`, så er handleren sat på capturing fasen.
 
 
-Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.
+Bemærk at mens der formelt er 3 faser vil den 2nd fase ("target phase": eventet nåede målelementet) ikke blive håndteret seperat: handlers på både capturing og bubbling faserne trigger ved den fase.
 
-Let's see both capturing and bubbling in action:
+Lad os se både capturing og bubbling i aktion:
 
 ```html run autorun height=140 edit
 <style>
@@ -177,57 +177,57 @@ Let's see both capturing and bubbling in action:
 </script>
 ```
 
-The code sets click handlers on *every* element in the document to see which ones are working.
+Koden sætter klik handlers på *hvert* element i dokumentet for at se hvilke der virker.
 
-If you click on `<p>`, then the sequence is:
+Hvis du klikker på `<p>`, så er sekvensen:
 
-1. `HTML` -> `BODY` -> `FORM` -> `DIV -> P` (capturing phase, the first listener):
-2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
+1. `HTML` -> `BODY` -> `FORM` -> `DIV -> P` (capturing fase, den første listener):
+2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling fase, den anden listener).
 
-Please note, the `P` shows up twice, because we've set two listeners: capturing and bubbling. The target triggers at the end of the first and at the beginning of the second phase.
+Bemærk at `P` dukker op to gange. Det er fordi vi sætter to listeners: capturing og bubbling. Målet for eventen trigger ved slutningen af den første og begyndelsen af den anden fase.
 
-There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.
+Der er en egenskab `event.eventPhase` der fortæller nummeret på den fase hvor eventet bliver fanget. Den bruges dog sjældent, da vi ofte ved det i handleren.
 
-```smart header="To remove the handler, `removeEventListener` needs the same phase"
-If we `addEventListener(..., true)`, then we should mention the same phase in `removeEventListener(..., true)` to correctly remove the handler.
+```smart header="For at fjerne en handler behøver `removeEventListener` den samme fase"
+Hvis vi bruger `addEventListener(..., true)`, så skal den samme fase nævnes i `removeEventListener(..., true)` for at fjerne handleren korrekt.
 ```
 
-````smart header="Listeners on the same element and same phase run in their set order"
-If we have multiple event handlers on the same phase, assigned to the same element with `addEventListener`, they run in the same order as they are created:
+````smart header="Listeners på samme element og i samme fase kører i dens orden de blev sat"
+Hvis vi har flere event handlers på samme fase, tildelt til det samme element med `addEventListener`, kører de i den rækkefølge de er oprettet:
 
 ```js
-elem.addEventListener("click", e => alert(1)); // guaranteed to trigger first
-elem.addEventListener("click", e => alert(2));
+elem.addEventListener("klik", e => alert(1)); // garanteret at blive afviklet først
+elem.addEventListener("klik", e => alert(2));
 ```
 ````
 
-```smart header="The `event.stopPropagation()` during the capturing also prevents the bubbling"
-The `event.stopPropagation()` method and its sibling `event.stopImmediatePropagation()` can also be called on the capturing phase. Then not only the futher capturing is stopped, but the bubbling as well.
+```smart header="Afvikling af `event.stopPropagation()` i capturing fase forhindrer også bubbling"
+Metoden `event.stopPropagation()` og dens søster `event.stopImmediatePropagation()` kan også blive kaldt i capturing fasen. Sker det vil det ikke kun forhindre yderligere fangst i cpaturing fasen. Det vil også stoppe propagation til bubbling fasen
 
-In other words, normally the event goes first down ("capturing") and then up ("bubbling"). But if `event.stopPropagation()` is called during the capturing phase, then the event travel stops, no bubbling will occur.
+Med andre ord så går eventet først ned ("capturing") og derefter op ("bubbling"). Hvis `event.stopPropagation()` kaldes i capturing fasewn, vil rejse stoppe der og ikke aktivere bubbling.
 ```
 
 
-## Summary
+## Opsummering
 
-When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
+Når en event sker vil det inderste indlejrede element blive markeret som "target element" (`event.target`).
 
-- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(..., true)` on the way (`true` is a shorthand for `{capture: true}`).
-- Then handlers are called on the target element itself.
-- Then the event bubbles up from `event.target` to the root, calling handlers assigned using `on<event>`, HTML attributes and `addEventListener` without the 3rd argument or with the 3rd argument `false/{capture:false}`.
+- Derefter vil eventet bevæge sig ned fra dokumentets rod til `event.target`, kaldende handlers tildelt med `addEventListener(..., true)` på vejen (`true` er en genvej for `{capture: true}`).
+- Derefter kaldes handlers på target elementet selv.
+- Til sidst bobler eventet op fra `event.target` til roden og kalder handlers tildelt ved brug af `on<event>`, HTML attributter og `addEventListener` uden den 3. argument eller med det 3. argument `false/{capture:false}`.
 
-Each handler can access `event` object properties:
+Hver handler kan tilgå `event` objektets egenskaber:
 
-- `event.target` -- the deepest element that originated the event.
-- `event.currentTarget` (=`this`) -- the current element that handles the event (the one that has the handler on it)
-- `event.eventPhase` -- the current phase (capturing=1, target=2, bubbling=3).
+- `event.target` -- det "dybeste" element, der forårsagede eventet.
+- `event.currentTarget` (=`this`) -- det nuværende element, der håndterer eventet (det element, der har handleren på sig)
+- `event.eventPhase` -- den nuværende fase (capturing=1, target=2, bubbling=3).
 
-Any event handler can stop the event by calling `event.stopPropagation()`, but that's not recommended, because we can't really be sure we won't need it above, maybe for completely different things.
+Enhver event handler kan stoppe eventet ved at kalde `event.stopPropagation()`, men det nabefales ikke, fordi vi ikke kan være sikre på, at der ikke er brug for det ovenfor, måske til helt andre ting.
 
-The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logical explanation for that.
+Fasen capturing bruges sjældent - event håndteres normalt i bubbling fasen og der er en logisk forklaring på det.
 
-In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.
+Hvis der skete en ulykke i virkeligheden vil lokale myndigheder reagere først. De kender bedst området hvor det skete. Derefter vil højere niveauer af myndigheder blive inddraget hvis nødvendigt.
 
-The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular `<td>` may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last one.
+Det samme er gældende for event handlers. Den kode der sætter en handler på et specifikt element har mest viden om detaljer for elementet og hvad det gør. En handler på et specifikt element har mest viden om detaljer for elementet og hvad det gør. En handler på et specifikt `<td>` kan være velegnet til præcis dette `<td>`, det ved alt om det, så det skal have en chance først. Derefter skal dets umiddelbare forældre også vide om sammenhængen, men lidt mindre, og så videre indtil det allerøverste element, der håndterer generelle koncepter og kører den sidste.
 
-Bubbling and capturing lay the foundation for "event delegation" -- an extremely powerful event handling pattern that we study in the next chapter.
+Bubbling og capturing lægger fundamentet for "event delegation" -- et ekstremt kraftfuldt event handling mønster, vi studerer i den næste kapitel.
diff --git a/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html
index 8313ec29f..7433c134f 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html
+++ b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html
@@ -1,20 +1,25 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="example.css" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="example.css">
-</head>
+  <body>
+    Et klik viser både
+    <code>event.target</code>
+    og
+    <code>this</code>
+    for at sammenligne:
 
-<body>
-  A click shows both <code>event.target</code> and <code>this</code> to compare:
+    <form id="form">
+      FORM
+      <div>
+        DIV
+        <p>P</p>
+      </div>
+    </form>
 
-  <form id="form">FORM
-    <div>DIV
-      <p>P</p>
-    </div>
-  </form>
-
-  <script src="script.js"></script>
-</body>
+    <script src="script.js"></script>
+  </body>
 </html>
diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
index b62d99089..901c8f162 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
+++ b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
@@ -1 +1,91 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="event-order-bubbling.svg"><path id="Rectangle-210" fill="#DBAF88" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#91C2A3" stroke-width="18" d="M173.634 81l16.09 51H43.276l16.09-51h114.267z"/><path id="Rectangle-208" stroke="#EFA39F" stroke-width="18" d="M39.986 29h153.028l22.71 72H17.276l22.71-72z"/><path id="Fill-46" fill="#166388" d="M121.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM117 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L121.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="1" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 353 216">
+  <!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123)  -->
+  <defs>
+    <style>
+      .st0 {
+        stroke: #c06334;
+        stroke-dasharray: 3 6;
+        stroke-linecap: square;
+        stroke-width: 2px;
+      }
+
+      .st0, .st1, .st2 {
+        fill: none;
+      }
+
+      .st3 {
+        fill: #643b0c;
+      }
+
+      .st3, .st4, .st5, .st6 {
+        isolation: isolate;
+      }
+
+      .st3, .st5 {
+        font-family: PTMono-Bold, 'PT Mono';
+      }
+
+      .st3, .st5, .st7, .st6 {
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      .st1 {
+        stroke: #efa39f;
+      }
+
+      .st1, .st2 {
+        stroke-width: 18px;
+      }
+
+      .st2 {
+        stroke: #91c2a3;
+      }
+
+      .st5 {
+        fill: #c06334;
+      }
+
+      .st7, .st6 {
+        fill: #af6e24;
+        font-family: OpenSans-Bold, 'Open Sans';
+      }
+
+      .st8 {
+        fill: #166388;
+      }
+
+      .st8, .st9 {
+        fill-rule: evenodd;
+      }
+
+      .st9 {
+        fill: #dbaf88;
+      }
+    </style>
+  </defs>
+  <g id="dom">
+    <g id="event-order-bubbling.svg">
+      <path id="Rectangle-210" class="st9" d="M159.49,140l14.51,46H60l14.51-46h84.98Z"/>
+      <path id="Rectangle-209" class="st2" d="M173.63,81l16.09,51H43.28l16.09-51h114.27Z"/>
+      <path id="Rectangle-208" class="st1" d="M39.99,29h153.03l22.71,72H17.28L39.99,29Z"/>
+      <path id="Fill-46" class="st8" d="M121.5,141v13.82c0,2.49-2.01,4.5-4.5,4.5s-4.5-2.01-4.5-4.5v-13.82h9ZM121.5,110v13h-9v-13h9ZM117,20.53c1.25-.06,2.47.41,3.36,1.3l17.64,17.64c1.76,1.76,1.76,4.61,0,6.36s-4.61,1.76-6.36,0l-10.14-10.14v56.3h-9v-56.3l-10.14,10.14c-1.74,1.78-4.59,1.81-6.36.08-1.78-1.74-1.81-4.59-.08-6.36.03-.03.05-.05.08-.08l17.64-17.64c.89-.89,2.11-1.36,3.36-1.3h0Z"/>
+      <g id="_x31_" class="st4">
+        <text class="st3" transform="translate(210 105)"><tspan x="0" y="0">1</tspan></text>
+      </g>
+      <g id="_x32_" class="st4">
+        <text class="st3" transform="translate(185 136)"><tspan x="0" y="0">2</tspan></text>
+      </g>
+      <g id="_x33_" class="st4">
+        <text class="st5" transform="translate(157 181)"><tspan x="0" y="0">3</tspan></text>
+      </g>
+      <g id="Most-deeply-nested-e" class="st4">
+        <text class="st6" transform="translate(240.59 161.7)"><tspan x="0" y="0">dybeste</tspan></text>
+        <text class="st7" transform="translate(318.52 175)"><tspan x="0" y="0"> </tspan></text>
+        <text class="st6" transform="translate(203.41 180.7)"><tspan x="0" y="0">indlejrede element</tspan></text>
+      </g>
+      <path id="Line-30" class="st0" d="M179.5,177.5h17.5"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg b/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg
index 566064cd6..23b338f1e 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg
+++ b/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg
@@ -1 +1,287 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="641" height="633" viewBox="0 0 641 633"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventflow" transform="translate(22 28)"><g id="nodes"><g id="Group" transform="translate(224.685)"><path id="Rectangle-path" fill="#D1CFCD" stroke="#181717" d="M0 0h134.427v34.567H0z"/><text id="Window" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="39.368" y="21.913">Window</tspan></text></g><g id="Group" transform="translate(234.287 60.493)"><path id="Rectangle-path" fill="#D1CFCD" stroke="#181717" d="M0 0h115.223v34.567H0z"/><text id="Document" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="22.084" y="21.913">Document</tspan></text></g><g id="html-node" transform="translate(243.889 120.985)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;html&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;html&gt;</tspan></text></g><g id="body-node" transform="translate(243.889 181.478)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;body&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;body&gt;</tspan></text></g><g id="table-node" transform="translate(243.889 241.97)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;table&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;table&gt;</tspan></text></g><g id="tbody-node" transform="translate(243.889 302.463)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tbody&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="19.204" y="21.913">&lt;tbody&gt;</tspan></text></g><g id="tr_1-node" transform="translate(80.656 380.239)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tr&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="35.527" y="21.913">&lt;tr&gt;</tspan></text></g><g id="tr_2-node" transform="translate(426.325 380.239)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tr&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;tr&gt;</tspan></text></g><g id="tr_1_td_1-node" transform="translate(13.443 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="31.686" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_1_td_1_text-node" transform="translate(0 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Shady-Grove" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="19.204" y="34.604">Shady Grove</tspan></text></g><g id="tr_1_td_2-node" transform="translate(147.87 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_1_td_2_text-node" transform="translate(134.427 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Aeolian" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="36.967" y="34.604">Aeolian</tspan></text></g><g id="tr_2_td_1-node" transform="translate(359.111 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#FFF" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#C06334" fill-rule="nonzero" font-family="PTMono-Regular, PT Mono" font-size="15.555" font-weight="normal"><tspan x="27.846" y="22.37">&lt;td&gt;</tspan></text></g><g id="tr_2_td_1_text-node" transform="translate(345.669 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><g id="Group" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal" transform="translate(12.482 14.555)"><text id="Over-the-River,"><tspan x=".48" y="14">Over the River,</tspan></text><text id="Charlie"><tspan x="25.925" y="31.284">Charlie</tspan></text></g></g><g id="tr_2_td_2-node" transform="translate(493.538 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_2_td_2_text-node" transform="translate(480.096 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Dorian" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="39.848" y="34.604">Dorian</tspan></text></g></g><g id="edges" stroke="#7E7C7B" stroke-width="2" transform="translate(61.452 34.567)"><path id="window-document" fill="#7E7C7B" d="M230.446 0v19.876"/><path id="document-html" fill="#7E7C7B" d="M230.446 60.493v19.876"/><path id="html-body" fill="#7E7C7B" d="M230.446 120.985v19.876"/><path id="body-table" fill="#7E7C7B" d="M230.446 181.478v19.876"/><path id="table-tbody" fill="#7E7C7B" d="M230.446 241.97v19.876"/><path id="tbody-tr_1" d="M230.446 302.463c0 11.522-16.003 17.283-48.01 17.283H86.417c-12.802 0-19.204 6.626-19.204 19.876"/><path id="tbody-tr_2" d="M230.446 302.463c0 11.522 22.404 17.283 67.213 17.283h96.02c12.802 0 19.203 6.626 19.203 19.876"/><path id="tr_1-tr_2_td_1" d="M67.213 380.239c0 11.522-6.4 17.283-19.203 17.283H19.204C6.4 397.522 0 404.148 0 417.4"/><path id="tr_1-tr_2_td_2" d="M67.213 380.239c0 11.522 6.402 17.283 19.204 17.283h28.806c12.802 0 19.204 6.626 19.204 19.877"/><path id="tr_2-tr_2_td_1" d="M412.882 380.239c0 11.522-6.401 17.283-19.204 17.283h-28.805c-12.803 0-19.204 6.626-19.204 19.877"/><path id="tr_2-tr_2_td_2" d="M412.882 380.239c0 11.522 12.803 17.283 38.408 17.283h9.602c12.802 0 19.204 6.626 19.204 19.877"/><path id="tr_1_td_1-text" fill="#7E7C7B" d="M0 458.015v19.876"/><path id="tr_1_td_2-text" fill="#7E7C7B" d="M134.427 458.015v19.876"/><path id="tr_2_td_1-text" fill="#7E7C7B" d="M345.669 458.015v19.876"/><path id="tr_2_td_2-text" fill="#7E7C7B" d="M482.016 458.015v19.876"/></g><g id="event-flow" transform="translate(103.7 15.443)"><g id="target_phase" transform="translate(186.757 442.572)"><text id="Target" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x=".48" y="34.148">Target</tspan></text><text id="Phase" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="0" y="51.431">Phase</tspan></text><text id="(2)" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="15.363" y="68.715">(2)</tspan></text><rect id="Rectangle-path" width="96.019" height="34.567" x="68.654" y="0" stroke="#C06334" stroke-width="4" rx="5"/></g><g id="capture_phase"><text id="Capture" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="0" y="165.615">Capture</tspan></text><text id="Phase" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="7.201" y="182.899">Phase</tspan></text><text id="(1)" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="22.564" y="200.182">(1)</tspan></text><path id="capture_phase_arrow" stroke="#D35155" stroke-width="3" d="M116.183.112c-38.408-2.593-38.408 40.616 2.88 49.258"/><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(92.178 59.74)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 120.233)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 180.725)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 241.218)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><path id="capture_phase_arrow2" stroke="#D35155" stroke-width="3" d="M125.785 302.575c-38.408-2.593-38.408 82.097 175.715 69.134"/><path id="capture_phase_arrow3" stroke="#D35155" stroke-width="3" d="M301.5 384.672c-94.099-2.593-94.099 51.85-62.412 64.813"/></g><g id="bubble_phase" transform="translate(250.61 12.21)"><text id="Bubbling" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="72.975" y="239.822">Bubbling</tspan></text><text id="Phase" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="83.057" y="257.106">Phase</tspan></text><text id="(3)" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="98.42" y="274.39">(3)</tspan></text><path id="bubble_phase_arrow3" stroke="#478964" stroke-width="3" d="M112.342 437.275c132.507-56.172 132.507-67.406 67.214-64.814"/><path id="bubble_phase_arrow2" stroke="#478964" stroke-width="3" d="M182.436 358.634c38.408-8.641 38.408-50.986-180.516-59.628"/><path id="bubble_phase_arrow" stroke="#478964" stroke-width="3" d="M0 287.772c38.408-2.593 38.408-37.16 0-45.802"/><g id="bubble_phase_arrow-link" stroke="#478964" stroke-width="3" transform="translate(0 181.478)"><path id="bubble_phase_arrow" d="M0 45.801C38.408 43.21 38.408 8.641 0 0"/></g><g id="bubble_phase_arrow-link" stroke="#478964" stroke-width="3" transform="translate(0 120.985)"><path id="bubble_phase_arrow" d="M0 45.801C38.408 43.21 38.408 8.641 0 0"/></g><path id="bubble_phase_arrow4" stroke="#478964" stroke-width="3" d="M0 106.294c48.01-2.593 48.01-37.16 9.602-45.801"/><path id="bubble_phase_arrow" stroke="#478964" stroke-width="3" d="M9.602 45.801C57.612 43.21 57.612 8.641 19.204 0"/></g></g></g></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 641 633">
+  <!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #181717;
+      }
+
+      .st0, .st1, .st2, .st3, .st4, .st5, .st6 {
+        isolation: isolate;
+      }
+
+      .st0, .st1, .st2, .st4, .st6 {
+        font-family: OpenSans, 'Open Sans';
+      }
+
+      .st0, .st5 {
+        font-size: 15.56px;
+      }
+
+      .st7 {
+        fill: #1c85b5;
+      }
+
+      .st7, .st8, .st9, .st10 {
+        stroke: #181717;
+      }
+
+      .st1 {
+        fill: #d35155;
+      }
+
+      .st1, .st2, .st4 {
+        font-size: 17.28px;
+      }
+
+      .st2, .st5 {
+        fill: #c06334;
+      }
+
+      .st11 {
+        stroke: #d35155;
+      }
+
+      .st11, .st12, .st13, .st14 {
+        fill: none;
+      }
+
+      .st11, .st13 {
+        stroke-width: 3px;
+      }
+
+      .st12, .st15 {
+        stroke: #7e7c7b;
+        stroke-width: 2px;
+      }
+
+      .st13 {
+        stroke: #478964;
+      }
+
+      .st8, .st6 {
+        fill: #fff;
+      }
+
+      .st4 {
+        fill: #478964;
+      }
+
+      .st14 {
+        stroke: #c06334;
+        stroke-width: 4px;
+      }
+
+      .st5 {
+        font-family: PTMono-Regular, 'PT Mono';
+      }
+
+      .st15 {
+        fill: #7e7c7b;
+      }
+
+      .st15, .st9 {
+        fill-rule: evenodd;
+      }
+
+      .st9 {
+        fill: #d1cfcd;
+      }
+
+      .st6 {
+        font-size: 12.96px;
+      }
+
+      .st10 {
+        fill: #c9dcea;
+      }
+    </style>
+  </defs>
+  <g id="dom">
+    <g id="eventflow">
+      <g id="nodes">
+        <g id="Group">
+          <path id="Rectangle-path" class="st9" d="M246.68,28h134.43v34.57h-134.43V28Z"/>
+          <g id="Window" class="st3">
+            <text class="st0" transform="translate(286.05 49.91)"><tspan x="0" y="0">Window</tspan></text>
+          </g>
+        </g>
+        <g id="Group1" data-name="Group">
+          <path id="Rectangle-path1" data-name="Rectangle-path" class="st9" d="M256.29,88.49h115.22v34.57h-115.22v-34.57Z"/>
+          <g id="Document" class="st3">
+            <text class="st0" transform="translate(278.37 110.41)"><tspan x="0" y="0">Document</tspan></text>
+          </g>
+        </g>
+        <g id="html-node">
+          <rect id="Rectangle-path2" data-name="Rectangle-path" class="st10" x="265.89" y="148.98" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_html_x3E_" class="st3">
+            <text class="st0" transform="translate(288.93 170.9)"><tspan x="0" y="0">&lt;html&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="body-node">
+          <rect id="Rectangle-path3" data-name="Rectangle-path" class="st10" x="265.89" y="209.48" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_body_x3E_" class="st3">
+            <text class="st0" transform="translate(288.93 231.39)"><tspan x="0" y="0">&lt;body&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="table-node">
+          <rect id="Rectangle-path4" data-name="Rectangle-path" class="st10" x="265.89" y="269.97" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_table_x3E_" class="st3">
+            <text class="st0" transform="translate(288.93 291.88)"><tspan x="0" y="0">&lt;table&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="tbody-node">
+          <rect id="Rectangle-path5" data-name="Rectangle-path" class="st10" x="265.89" y="330.46" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_tbody_x3E_" class="st3">
+            <text class="st0" transform="translate(285.09 352.38)"><tspan x="0" y="0">&lt;tbody&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="tr_1-node">
+          <rect id="Rectangle-path6" data-name="Rectangle-path" class="st10" x="102.66" y="408.24" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_tr_x3E_" class="st3">
+            <text class="st0" transform="translate(138.18 430.15)"><tspan x="0" y="0">&lt;tr&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="tr_2-node">
+          <rect id="Rectangle-path7" data-name="Rectangle-path" class="st10" x="448.33" y="408.24" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_tr_x3E_1" data-name="_x3C_tr_x3E_" class="st3">
+            <text class="st0" transform="translate(481.93 430.15)"><tspan x="0" y="0">&lt;tr&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="tr_1_td_1-node">
+          <rect id="Rectangle-path8" data-name="Rectangle-path" class="st10" x="35.44" y="486.02" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_td_x3E_" class="st3">
+            <text class="st0" transform="translate(67.13 507.93)"><tspan x="0" y="0">&lt;td&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="tr_1_td_1_text-node">
+          <ellipse id="Oval" class="st7" cx="83.45" cy="576.75" rx="61.45" ry="30.25"/>
+          <g id="Shady-Grove" class="st3">
+            <text class="st6" transform="translate(41.2 581.11)"><tspan x="0" y="0">Shady Grove</tspan></text>
+          </g>
+        </g>
+        <g id="tr_1_td_2-node">
+          <rect id="Rectangle-path9" data-name="Rectangle-path" class="st10" x="169.87" y="486.02" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_td_x3E_1" data-name="_x3C_td_x3E_" class="st3">
+            <text class="st0" transform="translate(203.48 507.93)"><tspan x="0" y="0">&lt;td&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="tr_1_td_2_text-node">
+          <ellipse id="Oval1" data-name="Oval" class="st7" cx="217.88" cy="576.75" rx="61.45" ry="30.25"/>
+          <g id="Aeolian" class="st3">
+            <text class="st6" transform="translate(193.39 581.11)"><tspan x="0" y="0">Aeolian</tspan></text>
+          </g>
+        </g>
+        <g id="tr_2_td_1-node">
+          <rect id="Rectangle-path10" data-name="Rectangle-path" class="st8" x="381.11" y="486.02" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_td_x3E_2" data-name="_x3C_td_x3E_" class="st3">
+            <text class="st5" transform="translate(408.96 508.39)"><tspan x="0" y="0">&lt;td&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="tr_2_td_1_text-node">
+          <ellipse id="Oval2" data-name="Oval" class="st7" cx="429.12" cy="576.75" rx="61.45" ry="30.25"/>
+          <g id="Group2" data-name="Group">
+            <g id="Over-the-River_x2C_" class="st3">
+              <text class="st6" transform="translate(380.63 575.06)"><tspan x="0" y="0">Over the River,</tspan></text>
+            </g>
+            <g id="Charlie" class="st3">
+              <text class="st6" transform="translate(406.08 592.35)"><tspan x="0" y="0">Charlie</tspan></text>
+            </g>
+          </g>
+        </g>
+        <g id="tr_2_td_2-node">
+          <rect id="Rectangle-path11" data-name="Rectangle-path" class="st10" x="515.54" y="486.02" width="96.02" height="34.57" rx="5" ry="5"/>
+          <g id="_x3C_td_x3E_3" data-name="_x3C_td_x3E_" class="st3">
+            <text class="st0" transform="translate(549.14 507.93)"><tspan x="0" y="0">&lt;td&gt;</tspan></text>
+          </g>
+        </g>
+        <g id="tr_2_td_2_text-node">
+          <ellipse id="Oval3" data-name="Oval" class="st7" cx="563.55" cy="576.75" rx="61.45" ry="30.25"/>
+          <g id="Dorian" class="st3">
+            <text class="st6" transform="translate(541.94 581.11)"><tspan x="0" y="0">Dorian</tspan></text>
+          </g>
+        </g>
+      </g>
+      <g id="edges">
+        <path id="window-document" class="st15" d="M313.9,62.57v19.88"/>
+        <path id="document-html" class="st15" d="M313.9,123.06v19.88"/>
+        <path id="html-body" class="st15" d="M313.9,183.55v19.88"/>
+        <path id="body-table" class="st15" d="M313.9,244.05v19.88"/>
+        <path id="table-tbody" class="st15" d="M313.9,304.54v19.88"/>
+        <path id="tbody-tr_1" class="st12" d="M313.9,365.03c0,11.52-16,17.28-48.01,17.28h-96.02c-12.8,0-19.2,6.63-19.2,19.88"/>
+        <path id="tbody-tr_2" class="st12" d="M313.9,365.03c0,11.52,22.4,17.28,67.21,17.28h96.02c12.8,0,19.2,6.63,19.2,19.88"/>
+        <path id="tr_1-tr_2_td_1" class="st12" d="M150.66,442.81c0,11.52-6.4,17.28-19.2,17.28h-28.81c-12.8,0-19.2,6.63-19.2,19.88"/>
+        <path id="tr_1-tr_2_td_2" class="st12" d="M150.66,442.81c0,11.52,6.4,17.28,19.2,17.28h28.81c12.8,0,19.2,6.63,19.2,19.88"/>
+        <path id="tr_2-tr_2_td_1" class="st12" d="M496.33,442.81c0,11.52-6.4,17.28-19.2,17.28h-28.8c-12.8,0-19.2,6.63-19.2,19.88"/>
+        <path id="tr_2-tr_2_td_2" class="st12" d="M496.33,442.81c0,11.52,12.8,17.28,38.41,17.28h9.6c12.8,0,19.2,6.63,19.2,19.88"/>
+        <path id="tr_1_td_1-text" class="st15" d="M83.45,520.58v19.88"/>
+        <path id="tr_1_td_2-text" class="st15" d="M217.88,520.58v19.88"/>
+        <path id="tr_2_td_1-text" class="st15" d="M429.12,520.58v19.88"/>
+        <path id="tr_2_td_2-text" class="st15" d="M565.47,520.58v19.88"/>
+      </g>
+      <g id="event-flow">
+        <g id="target_phase">
+          <g id="Target" class="st3">
+            <text class="st2" transform="translate(312.94 520.16)"><tspan x="0" y="0">Target</tspan></text>
+          </g>
+          <g id="Phase" class="st3">
+            <text class="st2" transform="translate(316.46 537.45)"><tspan x="0" y="0">fasen</tspan></text>
+          </g>
+          <g id="_x28_2_x29_" class="st3">
+            <text class="st2" transform="translate(327.82 554.73)"><tspan x="0" y="0">(2)</tspan></text>
+          </g>
+          <rect id="Rectangle-path12" data-name="Rectangle-path" class="st14" x="381.11" y="486.01" width="96.02" height="34.57" rx="5" ry="5"/>
+        </g>
+        <g id="capture_phase">
+          <g id="Capture" class="st3">
+            <text class="st1" transform="translate(125.7 209.06)"><tspan x="0" y="0">Capture</tspan></text>
+          </g>
+          <g id="Phase1" data-name="Phase" class="st3">
+            <text class="st1" transform="translate(136.9 226.34)"><tspan x="0" y="0">fasen</tspan></text>
+          </g>
+          <g id="_x28_1_x29_" class="st3">
+            <text class="st1" transform="translate(148.26 243.63)"><tspan x="0" y="0">(1)</tspan></text>
+          </g>
+          <path id="capture_phase_arrow" class="st11" d="M241.88,43.55c-38.41-2.59-38.41,40.62,2.88,49.26"/>
+          <g id="capture_phase_arrow-link">
+            <path id="capture_phase_arrow1" data-name="capture_phase_arrow" class="st11" d="M246.68,104.05c-38.41-2.59-38.41,40.62,2.88,49.26"/>
+          </g>
+          <g id="capture_phase_arrow-link1" data-name="capture_phase_arrow-link">
+            <path id="capture_phase_arrow2" data-name="capture_phase_arrow" class="st11" d="M251.49,164.54c-38.41-2.59-38.41,40.62,2.88,49.26"/>
+          </g>
+          <g id="capture_phase_arrow-link2" data-name="capture_phase_arrow-link">
+            <path id="capture_phase_arrow3" data-name="capture_phase_arrow" class="st11" d="M251.49,225.03c-38.41-2.59-38.41,40.62,2.88,49.26"/>
+          </g>
+          <g id="capture_phase_arrow-link3" data-name="capture_phase_arrow-link">
+            <path id="capture_phase_arrow4" data-name="capture_phase_arrow" class="st11" d="M251.49,285.53c-38.41-2.59-38.41,40.62,2.88,49.26"/>
+          </g>
+          <path id="uuid-bf27c858-3276-4764-b406-44871e96cd5e" data-name="capture_phase_arrow2" class="st11" d="M251.49,346.02c-38.41-2.59-38.41,82.1,175.71,69.13"/>
+          <path id="uuid-c0b9277e-257b-49d4-b0a2-e3d3f493f764" data-name="capture_phase_arrow3" class="st11" d="M427.2,428.11c-94.1-2.59-94.1,51.85-62.41,64.81"/>
+        </g>
+        <g id="bubble_phase">
+          <g id="Bubbling" class="st3">
+            <text class="st4" transform="translate(449.29 295.48)"><tspan x="0" y="0">Bubbling</tspan></text>
+          </g>
+          <g id="Phase2" data-name="Phase" class="st3">
+            <text class="st4" transform="translate(463.37 312.76)"><tspan x="0" y="0">fasen</tspan></text>
+          </g>
+          <g id="_x28_3_x29_" class="st3">
+            <text class="st4" transform="translate(474.73 330.04)"><tspan x="0" y="0">(3)</tspan></text>
+          </g>
+          <path id="bubble_phase_arrow3" class="st13" d="M488.65,492.93c132.51-56.17,132.51-67.41,67.21-64.81"/>
+          <path id="bubble_phase_arrow2" class="st13" d="M558.75,414.29c38.41-8.64,38.41-50.99-180.52-59.63"/>
+          <path id="bubble_phase_arrow" class="st13" d="M376.31,343.43c38.41-2.59,38.41-37.16,0-45.8"/>
+          <g id="bubble_phase_arrow-link">
+            <path id="bubble_phase_arrow1" data-name="bubble_phase_arrow" class="st13" d="M376.31,282.93c38.41-2.59,38.41-37.16,0-45.8"/>
+          </g>
+          <g id="bubble_phase_arrow-link1" data-name="bubble_phase_arrow-link">
+            <path id="bubble_phase_arrow4" data-name="bubble_phase_arrow" class="st13" d="M376.31,222.44c38.41-2.59,38.41-37.16,0-45.8"/>
+          </g>
+          <path id="uuid-1a05a23e-e589-40fb-8857-e7d1177620e2" data-name="bubble_phase_arrow4" class="st13" d="M376.31,161.95c48.01-2.59,48.01-37.16,9.6-45.8"/>
+          <path id="bubble_phase_arrow5" data-name="bubble_phase_arrow" class="st13" d="M385.91,101.45c48.01-2.59,48.01-37.16,9.6-45.8"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file