Highlight CSS shapes outside scroll.

circle{
  "paths": [
    {
      "path": [
        "M",
        168,
        88,
        "Q",
        168,
        121,
        145,
        145,
        "Q",
        121,
        168,
        88,
        168,
        "Q",
        55,
        168,
        31,
        145,
        "Q",
        8,
        121,
        8,
        88,
        "Q",
        8,
        55,
        31,
        31,
        "Q",
        55,
        8,
        88,
        8,
        "Q",
        121,
        8,
        145,
        31,
        "Q",
        168,
        55,
        168,
        88,
        "Z"
      ],
      "fillColor": "rgba(0, 0, 0, 0)"
    },
    {
      "path": [
        "M",
        200,
        88,
        "Q",
        200,
        134,
        167,
        167,
        "Q",
        134,
        200,
        88,
        200,
        "Q",
        42,
        200,
        9,
        167,
        "Q",
        -24,
        134,
        -24,
        88,
        "Q",
        -24,
        42,
        9,
        9,
        "Q",
        42,
        -24,
        88,
        -24,
        "Q",
        134,
        -24,
        167,
        9,
        "Q",
        200,
        42,
        200,
        88,
        "Z"
      ],
      "fillColor": "rgba(128, 128, 128, 0)"
    },
    {
      "path": [
        "M",
        24,
        24,
        "L",
        152,
        24,
        "L",
        152,
        152,
        "L",
        24,
        152,
        "Z"
      ],
      "fillColor": "rgba(255, 0, 0, 0)",
      "outlineColor": "rgba(128, 0, 0, 0)",
      "name": "content"
    },
    {
      "path": [
        "M",
        24,
        24,
        "L",
        152,
        24,
        "L",
        152,
        152,
        "L",
        24,
        152,
        "Z"
      ],
      "fillColor": "rgba(0, 255, 0, 0)",
      "name": "padding"
    },
    {
      "path": [
        "M",
        24,
        24,
        "L",
        152,
        24,
        "L",
        152,
        152,
        "L",
        24,
        152,
        "Z"
      ],
      "fillColor": "rgba(0, 0, 255, 0)",
      "name": "border"
    },
    {
      "path": [
        "M",
        8,
        8,
        "L",
        168,
        8,
        "L",
        168,
        168,
        "L",
        8,
        168,
        "Z"
      ],
      "fillColor": "rgba(255, 255, 255, 0)",
      "name": "margin"
    }
  ],
  "showRulers": true,
  "showExtensionLines": true,
  "showAccessibilityInfo": true,
  "colorFormat": "hex",
  "elementInfo": {
    "tagName": "div",
    "idValue": "circle",
    "className": ".float.circle",
    "nodeWidth": "128",
    "nodeHeight": "128",
    "isKeyboardFocusable": false,
    "accessibleName": "",
    "accessibleRole": "generic",
    "layoutObjectName": "LayoutBlockFlow",
    "showAccessibilityInfo": true
  }
}
circle{
  "paths": [
    {
      "path": [
        "M",
        168,
        88,
        "Q",
        168,
        121,
        145,
        145,
        "Q",
        121,
        168,
        88,
        168,
        "Q",
        55,
        168,
        31,
        145,
        "Q",
        8,
        121,
        8,
        88,
        "Q",
        8,
        55,
        31,
        31,
        "Q",
        55,
        8,
        88,
        8,
        "Q",
        121,
        8,
        145,
        31,
        "Q",
        168,
        55,
        168,
        88,
        "Z"
      ],
      "fillColor": "rgba(0, 0, 0, 0)"
    },
    {
      "path": [
        "M",
        200,
        88,
        "Q",
        200,
        134,
        167,
        167,
        "Q",
        134,
        200,
        88,
        200,
        "Q",
        42,
        200,
        9,
        167,
        "Q",
        -24,
        134,
        -24,
        88,
        "Q",
        -24,
        42,
        9,
        9,
        "Q",
        42,
        -24,
        88,
        -24,
        "Q",
        134,
        -24,
        167,
        9,
        "Q",
        200,
        42,
        200,
        88,
        "Z"
      ],
      "fillColor": "rgba(128, 128, 128, 0)"
    },
    {
      "path": [
        "M",
        24,
        24,
        "L",
        152,
        24,
        "L",
        152,
        152,
        "L",
        24,
        152,
        "Z"
      ],
      "fillColor": "rgba(255, 0, 0, 0)",
      "outlineColor": "rgba(128, 0, 0, 0)",
      "name": "content"
    },
    {
      "path": [
        "M",
        24,
        24,
        "L",
        152,
        24,
        "L",
        152,
        152,
        "L",
        24,
        152,
        "Z"
      ],
      "fillColor": "rgba(0, 255, 0, 0)",
      "name": "padding"
    },
    {
      "path": [
        "M",
        24,
        24,
        "L",
        152,
        24,
        "L",
        152,
        152,
        "L",
        24,
        152,
        "Z"
      ],
      "fillColor": "rgba(0, 0, 255, 0)",
      "name": "border"
    },
    {
      "path": [
        "M",
        8,
        8,
        "L",
        168,
        8,
        "L",
        168,
        168,
        "L",
        8,
        168,
        "Z"
      ],
      "fillColor": "rgba(255, 255, 255, 0)",
      "name": "margin"
    }
  ],
  "showRulers": true,
  "showExtensionLines": true,
  "showAccessibilityInfo": true,
  "colorFormat": "hex",
  "elementInfo": {
    "tagName": "div",
    "idValue": "circle",
    "className": ".float.circle",
    "nodeWidth": "128",
    "nodeHeight": "128",
    "isKeyboardFocusable": false,
    "accessibleName": "",
    "accessibleRole": "generic",
    "layoutObjectName": "LayoutBlockFlow",
    "showAccessibilityInfo": true
  }
}