JSFiddle - React, Tailwind, and code Playground

by Marc Brooks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image-more/3.4.2/dom-to-image-more.js"></script>
<div id="dom-node">
  <svg height="100" width="200" viewBox="0 0 2000 1000" xmlns="http://www.w3.org/2000/svg">
  </svg>
</div>

<div class="cloned">
<h2>
Clone
</h2>
<div id="catcher">
</div>
</div>

<div class="result">
<h2>
Result
</h2>
<div id="result">
</div>
</div>

CSS

#dom-node {
  height: 100px;
  width: auto;
  background-color: lightgrey;
  text-align: center;
  padding: 1em;
}

JavaScript

var node = document.querySelector('svg');

// For me on Firefox 100, `toPng` works fine at 29 iterations but throws an error at 30 iterations
// in the makeImage function (line 555, the image.onerror function).
// The reason for the error is that uri.length is a string 34277656 characters long, so it takes
// up 32.7 MB in memory, which is larger than the 32 MB Firefox max data URI length. This is documented
// at https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs#common_problems.
// Unfortunately, it's really hard to get the error to be thrown to the console because JSFiddle lets
// the page crash instead. Must copy-paste the code into a separate HTML page to inspect the error:
//   error {
//     bubbles: false
//     cancelBubble: false
//     cancelable: false
//     composed: false
//     currentTarget: null
//     defaultPrevented: false
//     eventPhase: 0
//     explicitOriginalTarget: <img src="data:image/svg+xml;charset=utf-8,<svg xmlns=\"http:…">
//     isTrusted: true
//     originalTarget: <img src="data:image/svg+xml;charset=utf-8,<svg xmlns=\"http:…">
//     returnValue: true
//     srcElement: <img src="data:image/svg+xml;charset=utf-8,<svg xmlns=\"http:…">
//     target: <img src="data:image/svg+xml;charset=utf-8,<svg xmlns=\"http:…">
//     timeStamp: 19393
//     type: "error"
//     <get isTrusted()>: function isTrusted()
//     <prototype>: EventPrototype { composedPath, stopPropagation, … }
//   }
var iterations = 30;

colors = ['red', 'green', 'blue', 'purple', 'fuchsia', 'navy', 'blue', 'orange', 'azure', 'beige', 'olive', 'pink', 'deeppink', 'hotpink', 'lightpink', 'lightcoral'];
for (var row = 0; row < 20; row += 1) {
  for (var col = 0; col < 10; col += 1) {
    for (var quantity = 0; quantity < iterations; quantity += 1) {
      var x = row * 100 + Math.floor(quantity / 10);
      var y = col * 100 + (quantity % 10);
      var color = colors[(row * 2 + col + quantity) % colors.length];
      path =...