Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <!DOCTYPE html>
<hmtl>
<head>
  <link rel="stylesheet" href="ideo.css"
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="911" height="511" viewBox="0 0 1366 768">

  <defs>

    <style>

      .cls-1 {

        clip-path: url(#clip-AllEye);

      }





      .cls-2 {

        fill: #bce0ff;

        stroke-width: 2px;

      }



      .cls-12, .cls-16, .cls-2, .cls-24, .cls-25, .cls-3, .cls-4, .cls-6 {

        stroke: #033da9;

      }



      .cls-23, .cls-27, .cls-3 {

        fill: #83bff0;

      }



      .cls-14, .cls-17, .cls-4 {

        fill: #0086ff;

      }



      .cls-10, .cls-11, .cls-13, .cls-15, .cls-19, .cls-20, .cls-21, .cls-24, .cls-26, .cls-30, .cls-34, .cls-5, .cls-9 {

        fill: #033da9;

      }



      .cls-12, .cls-16, .cls-22, .cls-33, .cls-6 {

        fill: none;

      }



      .cls-6 {

        stroke-width: 4px;

      }



      .cls-18, .cls-25, .cls-7 {

        fill: #8bcbff;

      }



      .cls-10, .cls-7, .cls-8, .cls-9 {

        opacity: 0.6;

      }



      .cls-31, .cls-35, .cls-8 {

        fill: #fff;

      }



      .cls-11, .cls-9 {

        font-size: 5px;

        font-family: OpenSans, Open Sans;

      }



      .cls-10, .cls-9 {

        letter-spacing: 0.002em;

      }



      .cls-10 {

        font-size: 4px;

        font-family: OpenSans-Light, Open Sans;

        font-weight: 300;

      }



      .cls-11, .cls-13, .cls-15, .cls-19, .cls-20, .cls-21, .cls-26, .cls-30 {

        letter-spacing: 0.012em;

      }



      .cls-13 {

        font-size: 12px;

      }



      .cls-13, .cls-15, .cls-19, .cls-20, .cls-21, .cls-26, .cls-30 {

        font-family: OpenSans-Bold, Open Sans;

        font-weight: 700;
        text-transform: uppercase;

      }



      .cls-15 {

        font-size: 13px;

      }



      .cls-16 {

        stroke-width: 3px;

      }



      .cls-19 {

        font-size: 14px;

      }



      .cls-20 {

        font-size: 10px;

      }



      .cls-21 {

        font-size: 8px;

      }



      .cls-22 {

        stroke: #83bff0;

      }



      .cls-26 {

        font-size: 24px;

      }



      .cls-28 {

        fill: #e4e4e4;

      }



      .cls-29 {

        fill: #007ded;

      }



      .cls-30 {

        font-size: 16px;

      }



      .cls-31 {

        stroke: #707070;

      }



      .cls-32, .cls-34 {

        stroke: none;

      }



      .cls-36 {

        filter: url(#Intersection_1);

      }



      .cls-37 {

        filter: url(#Rectangle_58-2);

      }



      .cls-38 {

        filter: url(#Rectangle_61);

      }



      .cls-39 {

        filter: url(#Rectangle_60);

      }



      .cls-40 {

        filter: url(#Rectangle_58);

      }



      .cls-41 {

        filter: url(#Union_9);

      }



      .cls-42 {

        filter: url(#Path_27);

      }



      .cls-43 {

        filter: url(#Rectangle_47);

      }



      .cls-44 {

        filter: url(#Rectangle_43);

      }



      .cls-45 {

        filter: url(#Rectangle_42);

      }



      .cls-46 {

        filter: url(#Rectangle_31);

      }



      .cls-47 {

        filter: url(#Rectangle_26);

      }



      .cls-48 {

        filter: url(#Rectangle_23);

      }



      .cls-49 {

        filter: url(#Rectangle_11);

      }



      .cls-50 {

        filter: url(#Union_4);

      }



      .cls-51 {

        filter: url(#Rectangle_6);

      }



      .cls-52 {

        filter: url(#Union_3);

      }



      .cls-53 {

        filter: url(#Union_2);

      }



      .cls-54 {

        filter: url(#Union_1);

      }



      .cls-55 {

        filter: url(#Rectangle_1);

      }



      .cls-56 {

        filter: url(#Rectangle_9);

      }

    </style>

    <filter id="Rectangle_9" x="952.98" y="113.647" width="204.5" height="172.543" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_1" x="1052.98" y="76.647" width="204.5" height="122.543" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-2"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-2"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Union_1" x="1064.775" y="89.541" width="31.951" height="23.944" filterUnits="userSpaceOnUse">

      <feOffset dx="2" dy="2" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-3"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-3"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Union_2" x="1109.006" y="89.541" width="31.951" height="23.944" filterUnits="userSpaceOnUse">

      <feOffset dx="2" dy="2" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-4"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-4"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Union_3" x="1153.179" y="89.541" width="31.951" height="23.944" filterUnits="userSpaceOnUse">

      <feOffset dx="2" dy="2" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-5"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-5"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_6" x="1111.98" y="151.647" width="204.5" height="122.543" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-6"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-6"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Union_4" x="1123.775" y="164.541" width="31.951" height="23.944" filterUnits="userSpaceOnUse">

      <feOffset dx="2" dy="2" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-7"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-7"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_11" x="1017.98" y="235.647" width="204.5" height="94.853" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-8"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-8"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_23" x="124.5" y="530.813" width="297.517" height="186.687" filterUnits="userSpaceOnUse">

      <feOffset dx="-3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-9"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-9"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_26" x="213.5" y="618.718" width="291.006" height="50.833" filterUnits="userSpaceOnUse">

      <feOffset dx="-3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-10"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-10"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_31" x="41.41" y="579.345" width="124.434" height="70.155" filterUnits="userSpaceOnUse">

      <feOffset dx="-3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-11"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-11"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_42" x="162.5" y="280.218" width="177.5" height="133.833" filterUnits="userSpaceOnUse">

      <feOffset dx="-3" dy="-3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-12"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-12"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_43" x="162.293" y="256.686" width="177.5" height="28.792" filterUnits="userSpaceOnUse">

      <feOffset dx="-3" dy="-3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-13"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-13"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_47" x="1150" y="495" width="148.5" height="44.5" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-14"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-14"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Path_27" x="1150" y="534" width="148.5" height="166.5" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-15"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-15"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Union_9" x="1024" y="596" width="166.5" height="148.5" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-16"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-16"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_58" x="932.98" y="472.647" width="204.5" height="72.853" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-17"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-17"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_60" x="390.5" y="65.218" width="243.5" height="133.833" filterUnits="userSpaceOnUse">

      <feOffset dx="-3" dy="-3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-18"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-18"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_61" x="390.293" y="41.686" width="243.5" height="28.792" filterUnits="userSpaceOnUse">

      <feOffset dx="-3" dy="-3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-19"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-19"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Rectangle_58-2" x="633.98" y="632.647" width="204.5" height="72.853" filterUnits="userSpaceOnUse">

      <feOffset dx="3" dy="3" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-20"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-20"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <filter id="Intersection_1" x="536.5" y="273" width="292.792" height="229.619" filterUnits="userSpaceOnUse">

      <feOffset dy="6" input="SourceAlpha"/>

      <feGaussianBlur stdDeviation="0.5" result="blur-21"/>

      <feFlood flood-color="#033da9" flood-opacity="0.161"/>

      <feComposite operator="in" in2="blur-21"/>

      <feComposite in="SourceGraphic"/>

    </filter>

    <clipPath id="clip-AllEye">

      <rect width="1366" height="768"/>

    </clipPath>

  </defs>

  <g id="AllEye" class="cls-1">

    <g class="reveal">
    <rect class="cls-35" width="1366" height="768"/>

    <g id="BG" class="cls-2">

      <rect class="cls-32" width="1366" height="768"/>

      <rect class="cls-33" x="1" y="1" width="1364" height="766"/>

    </g>

    <g id="Files" class="grow2">

      <g id="Window4" transform="translate(13 -68)">

        <g class="cls-56" transform="matrix(1, 0, 0, 1, -13, 68)">

          <g id="Rectangle_9-2" data-name="Rectangle 9" class="cls-3" transform="translate(952.98 113.65)">

            <rect class="cls-32" width="200" height="168.043"/>

            <rect class="cls-33" x="0.5" y="0.5" width="199" height="167.043"/>

          </g>

        </g>

        <g id="Rectangle_10" data-name="Rectangle 10" class="cls-4" transform="translate(939.98 159)">

          <rect class="cls-32" width="200" height="23.333"/>

          <rect class="cls-33" x="0.5" y="0.5" width="199" height="22.333"/>

        </g>

        <circle id="Ellipse_11" data-name="Ellipse 11" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(946.47 166.549)"/>

        <circle id="Ellipse_12" data-name="Ellipse 12" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(961.569 166.549)"/>

        <circle id="Ellipse_13" data-name="Ellipse 13" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(976.851 165.863)"/>

        <line id="Line_6" data-name="Line 6" class="cls-6" x2="129.02" transform="translate(1003.725 168.265)"/>

        <line id="Line_7" data-name="Line 7" class="cls-6" x2="129.02" transform="translate(1003.725 173.755)"/>

        <rect id="Rectangle_13" data-name="Rectangle 13" class="cls-7" width="198" height="24" transform="translate(941 206)"/>

        <rect id="Rectangle_14" data-name="Rectangle 14" class="cls-7" width="198" height="24" transform="translate(941 254)"/>

        <rect id="Rectangle_15" data-name="Rectangle 15" class="cls-7" width="198" height="24" transform="translate(941 302)"/>

        <rect id="Rectangle_16" data-name="Rectangle 16" class="cls-8" width="4" height="4" transform="translate(949 192)"/>

        <rect id="Rectangle_17" data-name="Rectangle 17" class="cls-8" width="4" height="4" transform="translate(949 216)"/>

        <rect id="Rectangle_18" data-name="Rectangle 18" class="cls-8" width="4" height="4" transform="translate(949 240)"/>

        <rect id="Rectangle_19" data-name="Rectangle 19" class="cls-8" width="4" height="4" transform="translate(949 264)"/>

        <rect id="Rectangle_20" data-name="Rectangle 20" class="cls-8" width="4" height="4" transform="translate(949 288)"/>

        <rect id="Rectangle_21" data-name="Rectangle 21" class="cls-8" width="4" height="4" transform="translate(949 312)"/>

        <rect id="Rectangle_22" data-name="Rectangle 22" class="cls-8" width="4" height="4" transform="translate(949 336)"/>

        <text id="Your_Medical_Bills" data-name="Your Medical Bills" class="cls-9" transform="translate(962 191)"><tspan x="0" y="0">Your Medical Bills</tspan></text>

        <text id="Your_Company_Proposals" data-name="Your Company Proposals" class="cls-9" transform="translate(962 215)"><tspan x="0" y="0">Your Company Proposals</tspan></text>

        <text id="Your_Online_Purchases" data-name="Your Online Purchases" class="cls-9" transform="translate(962 239)"><tspan x="0" y="0">Your Online Purchases</tspan></text>

        <text id="Your_Subscriptions" data-name="Your Subscriptions" class="cls-9" transform="translate(962 263)"><tspan x="0" y="0">Your Subscriptions</tspan></text>

        <text id="Your_Tax_Information" data-name="Your Tax Information" class="cls-9" transform="translate(962 287)"><tspan x="0" y="0">Your Tax Information</tspan></text>

        <text id="Your_Contract_Copy" data-name="Your Contract Copy" class="cls-9" transform="translate(962 311)"><tspan x="0" y="0">Your Contract Copy</tspan></text>

        <text id="Your_Medical_Records" data-name="Your Medical Records" class="cls-9" transform="translate(962 335)"><tspan x="0" y="0">Your Medical Records</tspan></text>

        <text id="In_the_physical_world_privacy_is_easy_to_recognize:_a_sealed_envelope_a_locked_door_or_a_whispered_conversation_between_two_people._But_in_cyberspace_privacy_is_harder_to_see." data-name="In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a
whispered conversation between two people. But in cyberspace, privacy is harder to see." class="cls-10" transform="translate(963 197)"><tspan x="0" y="0">In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a</tspan><tspan x="0" y="5">whispered conversation between two people. But in cyberspace, privacy is harder to see.</tspan></text>

        <text id="In_the_physical_world_privacy_is_easy_to_recognize:_a_sealed_envelope_a_locked_door_or_a_whispered_conversation_between_two_people._But_in_cyberspace_privacy_is_harder_to_see.-2" data-name="In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a
whispered conversation between two people. But in cyberspace, privacy is harder to see." class="cls-10" transform="translate(963 221)"><tspan x="0" y="0">In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a</tspan><tspan x="0" y="5">whispered conversation between two people. But in cyberspace, privacy is harder to see.</tspan></text>

        <text id="In_the_physical_world_privacy_is_easy_to_recognize:_a_sealed_envelope_a_locked_door_or_a_whispered_conversation_between_two_people._But_in_cyberspace_privacy_is_harder_to_see.-3" data-name="In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a
whispered conversation between two people. But in cyberspace, privacy is harder to see." class="cls-10" transform="translate(963 245)"><tspan x="0" y="0">In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a</tspan><tspan x="0" y="5">whispered conversation between two people. But in cyberspace, privacy is harder to see.</tspan></text>

        <text id="In_the_physical_world_privacy_is_easy_to_recognize:_a_sealed_envelope_a_locked_door_or_a_whispered_conversation_between_two_people._But_in_cyberspace_privacy_is_harder_to_see.-4" data-name="In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a
whispered conversation between two people. But in cyberspace, privacy is harder to see." class="cls-10" transform="translate(963 269)"><tspan x="0" y="0">In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a</tspan><tspan x="0" y="5">whispered conversation between two people. But in cyberspace, privacy is harder to see.</tspan></text>

        <text id="In_the_physical_world_privacy_is_easy_to_recognize:_a_sealed_envelope_a_locked_door_or_a_whispered_conversation_between_two_people._But_in_cyberspace_privacy_is_harder_to_see.-5" data-name="In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a
whispered conversation between two people. But in cyberspace, privacy is harder to see." class="cls-10" transform="translate(963 293)"><tspan x="0" y="0">In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a</tspan><tspan x="0" y="5">whispered conversation between two people. But in cyberspace, privacy is harder to see.</tspan></text>

        <text id="In_the_physical_world_privacy_is_easy_to_recognize:_a_sealed_envelope_a_locked_door_or_a_whispered_conversation_between_two_people._But_in_cyberspace_privacy_is_harder_to_see.-6" data-name="In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a
whispered conversation between two people. But in cyberspace, privacy is harder to see." class="cls-10" transform="translate(963 317)"><tspan x="0" y="0">In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a</tspan><tspan x="0" y="5">whispered conversation between two people. But in cyberspace, privacy is harder to see.</tspan></text>

        <text id="In_the_physical_world_privacy_is_easy_to_recognize:_a_sealed_envelope_a_locked_door_or_a_whispered_conversation_between_two_people._But_in_cyberspace_privacy_is_harder_to_see.-7" data-name="In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a
whispered conversation between two people. But in cyberspace, privacy is harder to see." class="cls-10" transform="translate(963 341)"><tspan x="0" y="0">In the physical world, privacy is easy to recognize: a sealed envelope, a locked door, or a</tspan><tspan x="0" y="5">whispered conversation between two people. But in cyberspace, privacy is harder to see.</tspan></text>

      </g>

      <g id="Window1" transform="translate(40.98 -14)">

        <g class="cls-55" transform="matrix(1, 0, 0, 1, -40.98, 14)">

          <g id="Rectangle_1-2" data-name="Rectangle 1" class="cls-3" transform="translate(1052.98 76.65)">

            <rect class="cls-32" width="200" height="118.043"/>

            <rect class="cls-33" x="0.5" y="0.5" width="199" height="117.043"/>

          </g>

        </g>

        <g id="Rectangle_2" data-name="Rectangle 2" class="cls-4" transform="translate(1012 68)">

          <rect class="cls-32" width="200" height="23.333"/>

          <rect class="cls-33" x="0.5" y="0.5" width="199" height="22.333"/>

        </g>

        <circle id="Ellipse_5" data-name="Ellipse 5" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(1017.49 75.549)"/>

        <circle id="Ellipse_6" data-name="Ellipse 6" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(1032.588 75.549)"/>

        <circle id="Ellipse_7" data-name="Ellipse 7" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(1047.871 74.863)"/>

        <line id="Line_1" data-name="Line 1" class="cls-6" x2="129.02" transform="translate(1074.745 77.265)"/>

        <line id="Line_2" data-name="Line 2" class="cls-6" x2="129.02" transform="translate(1074.745 82.755)"/>

        <g class="cls-54" transform="matrix(1, 0, 0, 1, -40.98, 14)">

          <path id="Union_1-2" data-name="Union 1" class="cls-4" d="M0,19.444V0H9.688l4.038,3.66H27.451V19.444Z" transform="translate(1065.27 90.04)"/>

        </g>

        <g class="cls-53" transform="matrix(1, 0, 0, 1, -40.98, 14)">

          <path id="Union_2-2" data-name="Union 2" class="cls-4" d="M0,19.444V0H9.688l4.038,3.66H27.451V19.444Z" transform="translate(1109.51 90.04)"/>

        </g>

        <g class="cls-52" transform="matrix(1, 0, 0, 1, -40.98, 14)">

          <path id="Union_3-2" data-name="Union 3" class="cls-4" d="M0,19.444V0H9.688l4.038,3.66H27.451V19.444Z" transform="translate(1153.68 90.04)"/>

        </g>

        <text id="Secrets" class="cls-11" transform="translate(1029.098 131.323)"><tspan x="0" y="0">Secrets</tspan></text>

        <text id="Notes" class="cls-11" transform="translate(1074.712 131.323)"><tspan x="0" y="0">Notes</tspan></text>

        <text id="Ideas" class="cls-11" transform="translate(1119.553 131.323)"><tspan x="0" y="0">Ideas</tspan></text>

      </g>

      <g id="Window2" transform="translate(128 -18)">

        <g class="cls-51" transform="matrix(1, 0, 0, 1, -128, 18)">

          <g id="Rectangle_6-2" data-name="Rectangle 6" class="cls-3" transform="translate(1111.98 151.65)">

            <rect class="cls-32" width="200" height="118.043"/>

            <rect class="cls-33" x="0.5" y="0.5" width="199" height="117.043"/>

          </g>

        </g>

        <g id="Rectangle_7" data-name="Rectangle 7" class="cls-4" transform="translate(983.98 147)">

          <rect class="cls-32" width="200" height="23.333"/>

          <rect class="cls-33" x="0.5" y="0.5" width="199" height="22.333"/>

        </g>

        <circle id="Ellipse_8" data-name="Ellipse 8" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(990.47 154.549)"/>

        <circle id="Ellipse_9" data-name="Ellipse 9" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(1005.569 154.549)"/>

        <circle id="Ellipse_10" data-name="Ellipse 10" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(1020.851 153.863)"/>

        <line id="Line_3" data-name="Line 3" class="cls-6" x2="129.02" transform="translate(1047.725 156.265)"/>

        <line id="Line_4" data-name="Line 4" class="cls-6" x2="129.02" transform="translate(1047.725 161.755)"/>

        <g class="cls-50" transform="matrix(1, 0, 0, 1, -128, 18)">

          <path id="Union_4-2" data-name="Union 4" class="cls-4" d="M0,19.444V0H9.688l4.038,3.66H27.451V19.444Z" transform="translate(1124.27 165.04)"/>

        </g>

        <text id="Movies" class="cls-11" transform="translate(1010 210)"><tspan x="-8.397" y="0">Movies</tspan></text>

        <line id="Line_5" data-name="Line 5" class="cls-12" y2="112" transform="translate(1102.5 172.5)"/>

        <text id="Your_Personal_Secrets" data-name="Your
Personal
Secrets" class="cls-13" transform="translate(1143 206)"><tspan x="-18.862" y="0">Your </tspan><tspan x="-33.711" y="17">Personal </tspan><tspan x="-25.021" y="34">Secrets</tspan></text>

      </g>

      <g id="Window3" transform="translate(142 195)">

        <g class="cls-49" transform="matrix(1, 0, 0, 1, -142, -195)">

          <g id="Rectangle_11-2" data-name="Rectangle 11" class="cls-3" transform="translate(1017.98 235.65)">

            <rect class="cls-32" width="200" height="90.353"/>

            <rect class="cls-33" x="0.5" y="0.5" width="199" height="89.353"/>

          </g>

        </g>

        <g id="Path_26" data-name="Path 26" class="cls-14" transform="translate(875.98 18)">

          <path class="cls-32" d="M 199.4999542236328 22.83334159851074 L 0.5000020861625671 22.83334159851074 L 0.5000020861625671 0.4999919831752777 L 199.4999542236328 0.4999919831752777 L 199.4999542236328 22.83334159851074 Z"/>

          <path class="cls-34" d="M 1 1.000009536743164 L 1 22.33332443237305 L 198.9999542236328 22.33332443237305 L 198.9999542236328 1.000009536743164 L 1 1.000009536743164 M 0 9.5367431640625e-06 L 199.9999542236328 9.5367431640625e-06 L 199.9999542236328 23.33332443237305 L 0 23.33332443237305 L 0 9.5367431640625e-06 Z"/>

        </g>

        <circle id="Ellipse_14" data-name="Ellipse 14" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(882.47 25.549)"/>

        <circle id="Ellipse_15" data-name="Ellipse 15" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(897.569 25.549)"/>

        <circle id="Ellipse_16" data-name="Ellipse 16" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(912.851 24.863)"/>

        <line id="Line_8" data-name="Line 8" class="cls-6" x2="129.02" transform="translate(939.725 27.265)"/>

        <line id="Line_9" data-name="Line 9" class="cls-6" x2="129.02" transform="translate(939.725 32.755)"/>

        <text id="Whatever_you_want_to_hide_" data-name="Whatever you
want to hide!" class="cls-13" transform="translate(976 82)"><tspan x="-49.623" y="0">Whatever you </tspan><tspan x="-46.62" y="17">want to hide!</tspan></text>

      </g>

    </g>

    <g id="Browsing" class="grow4">

      <g id="window6" transform="translate(129 507)">

        <g class="cls-48" transform="matrix(1, 0, 0, 1, -129, -507)">

          <g id="Rectangle_23-2" data-name="Rectangle 23" class="cls-3" transform="translate(129 530.81)">

            <rect class="cls-32" width="293.017" height="182.187"/>

            <rect class="cls-33" x="0.5" y="0.5" width="292.017" height="181.187"/>

          </g>

        </g>

        <g id="Rectangle_24" data-name="Rectangle 24" class="cls-3" transform="translate(0 0.281)">

          <rect class="cls-32" width="293.017" height="24.292"/>

          <rect class="cls-33" x="0.5" y="0.5" width="292.017" height="23.292"/>

        </g>

        <g id="Rectangle_25" data-name="Rectangle 25" class="cls-4" transform="translate(0)">

          <rect class="cls-32" width="23.974" height="23.974"/>

          <rect class="cls-33" x="0.5" y="0.5" width="22.974" height="22.974"/>

        </g>

        <text id="X" class="cls-15" transform="translate(11.991 16.664)"><tspan x="-4.335" y="0">X</tspan></text>

        <line id="Line_10" data-name="Line 10" class="cls-16" x2="240.629" transform="translate(38.181 8.435)"/>

        <line id="Line_11" data-name="Line 11" class="cls-16" x2="240.629" transform="translate(38.181 16.427)"/>

        <g id="right_t" transform="translate(50.612 24.862)">

          <path id="Path_6" data-name="Path 6" class="cls-3" d="M1553.2,398c36.319,75.02,51.2,80.379,51.2,80.379l10.717,48.227s-22.625,33.342-54.776,29.77-42.869-20.839-52.4-37.51S1503.191,398,1503.191,398Z" transform="translate(-1502 -398)"/>

          <path id="Path_8" data-name="Path 8" class="cls-17" d="M2218.458,613.5c-46.695,70.032-103.333,5.217-103.333,5.217a68.764,68.764,0,0,0,20.977,26.527c11.084,8.275,27.2,11.915,38.4,11.543,25.695-.854,47.06-29.3,47.06-29.3Z" transform="translate(-2108.799 -498.513)"/>

          <path id="Path_10" data-name="Path 10" class="cls-18" d="M2168.412,498.553c2,3.552,37.737,61.933,37.737,61.933s.444,3.774-3.108,2.22-37.071-59.935-38.847-62.155S2166.414,495,2168.412,498.553Z" transform="translate(-2123.127 -490.784)"/>

        </g>

        <g id="left_t" transform="translate(0 24.862)">

          <path id="Path_5" data-name="Path 5" class="cls-3" d="M1553.2,398c36.319,75.02,51.2,80.379,51.2,80.379l10.717,48.227s-22.625,33.342-54.776,29.77-56.634-22.9-57.158-37.238,0-121.138,0-121.138Z" transform="translate(-1502 -398)"/>

          <path id="Path_7" data-name="Path 7" class="cls-17" d="M2218.458,613.5c-46.695,70.032-107.26,10.351-107.26,10.351a39.491,39.491,0,0,0,16.8,18.4c11.084,8.275,34.6,14.972,45.8,14.6,25.695-.854,47.767-29.366,47.767-29.366Z" transform="translate(-2108.799 -498.513)"/>

          <path id="Path_9" data-name="Path 9" class="cls-18" d="M2168.412,498.553c2,3.552,37.737,61.933,37.737,61.933s.444,3.774-3.108,2.22-37.071-59.935-38.847-62.155S2166.414,495,2168.412,498.553Z" transform="translate(-2121.351 -483.681)"/>

        </g>

        <path id="Union_5" data-name="Union 5" class="cls-5" d="M4.061,21.861l.008-.008A12.587,12.587,0,1,1,21.853,4.069l.008-.008.008.008A12.587,12.587,0,1,1,39.653,21.853l.008.008-17.8,17.8Z" transform="translate(232.638 31.966)"/>

        <path id="Union_6" data-name="Union 6" class="cls-17" d="M4.061,21.861l.008-.008A12.587,12.587,0,1,1,21.853,4.069l.008-.008.008.008A12.587,12.587,0,1,1,39.653,21.853l.008.008-17.8,17.8Z" transform="translate(234.414 31.966)"/>

        <text id="_18_" data-name="18+" class="cls-19" transform="translate(256.181 53.181)"><tspan x="-12.155" y="0">18+</tspan></text>

      </g>

      <g id="window5" transform="translate(217.793 594.905)">

        <g class="cls-47" transform="matrix(1, 0, 0, 1, -217.79, -594.91)">

          <g id="Rectangle_26-2" data-name="Rectangle 26" class="cls-3" transform="translate(218 618.72)">

            <rect class="cls-32" width="286.506" height="46.333"/>

            <rect class="cls-33" x="0.5" y="0.5" width="285.506" height="45.333"/>

          </g>

        </g>

        <g id="Rectangle_27" data-name="Rectangle 27" class="cls-3" transform="translate(0 0.281)">

          <rect class="cls-32" width="286.506" height="24.292"/>

          <rect class="cls-33" x="0.5" y="0.5" width="285.506" height="23.292"/>

        </g>

        <g id="Rectangle_28" data-name="Rectangle 28" class="cls-4" transform="translate(0 0)">

          <rect class="cls-32" width="23.974" height="23.974"/>

          <rect class="cls-33" x="0.5" y="0.5" width="22.974" height="22.974"/>

        </g>

        <text id="X-2" data-name="X" class="cls-15" transform="translate(11.991 16.664)"><tspan x="-4.335" y="0">X</tspan></text>

        <line id="Line_12" data-name="Line 12" class="cls-16" x2="235.302" transform="translate(35.221 8.435)"/>

        <line id="Line_13" data-name="Line 13" class="cls-16" x2="235.302" transform="translate(35.221 16.427)"/>

        <text id="You_don_t_want_people_to_know_about_this_" data-name="You don&apos;t want people to know about this!" class="cls-20" transform="translate(143.207 46.517)"><tspan x="-125.369" y="0">You don&apos;t want people to know about this!</tspan></text>

      </g>

      <g id="window7">

        <g class="cls-46" transform="matrix(1, 0, 0, 1, 0, 0)">

          <g id="Rectangle_31-2" data-name="Rectangle 31" class="cls-3" transform="translate(45.91 579.34)">

            <rect class="cls-32" width="119.934" height="65.655"/>

            <rect class="cls-33" x="0.5" y="0.5" width="118.934" height="64.655"/>

          </g>

        </g>

        <g id="Rectangle_32" data-name="Rectangle 32" class="cls-3" transform="translate(45.793 566.063)">

          <rect class="cls-32" width="119.934" height="13.71"/>

          <rect class="cls-33" x="0.5" y="0.5" width="118.934" height="12.71"/>

        </g>

        <g id="Rectangle_33" data-name="Rectangle 33" class="cls-4" transform="translate(46 566)">

          <rect class="cls-32" width="13.53" height="13.53"/>

          <rect class="cls-33" x="0.5" y="0.5" width="12.53" height="12.53"/>

        </g>

        <text id="X-3" data-name="X" class="cls-21" transform="translate(53 576)"><tspan x="-2.668" y="0">X</tspan></text>

        <line id="Line_14" data-name="Line 14" class="cls-16" x2="91.036" transform="translate(66.235 570.666)"/>

        <line id="Line_15" data-name="Line 15" class="cls-16" x2="91.036" transform="translate(66.235 575.176)"/>

        <circle id="Ellipse_23" data-name="Ellipse 23" class="cls-5" cx="22" cy="22" r="22" transform="translate(82 591)"/>

        <circle id="Ellipse_21" data-name="Ellipse 21" class="cls-17" cx="22" cy="22" r="22" transform="translate(84 590)"/>

        <path id="Path_11" data-name="Path 11" class="cls-22" d="M2151.857,589c.286-5.143,7.571-6.429,8.643,0" transform="translate(-2041 19)"/>

        <path id="Path_12" data-name="Path 12" class="cls-22" d="M2151.857,589c.286-5.143,7.571-6.429,8.643,0" transform="translate(-2059 19)"/>

        <path id="Path_13" data-name="Path 13" class="cls-22" d="M2151.857,584.647c.633,8.856,16.77,11.07,19.143,0" transform="translate(-2055.429 31)"/>

        <path id="Union_7" data-name="Union 7" class="cls-23" d="M-2038,4V0h4V4a2,2,0,0,1-2,2A2,2,0,0,1-2038,4Z" transform="translate(1863.728 1639.402) rotate(30)"/>

      </g>

    </g>

    <g id="Opinion" class="grow">

      <g id="Ballot" transform="translate(-8 -1)">

        <g id="Rectangle_35" data-name="Rectangle 35" class="cls-3" transform="translate(80 232)">

          <rect class="cls-32" width="160" height="120"/>

          <rect class="cls-33" x="0.5" y="0.5" width="159" height="119"/>

        </g>

        <path id="Path_14" data-name="Path 14" class="cls-3" d="M2145.333,180.667l16-24h128l16,24Z" transform="translate(-2065.333 51.333)"/>

        <path id="Path_15" data-name="Path 15" class="cls-24" d="M2182,192l2.5-8h75l2.5,8Z" transform="translate(-2062 32)"/>

        <g id="Rectangle_36" data-name="Rectangle 36" class="cls-3" transform="translate(128 114)">

          <rect class="cls-32" width="64" height="80"/>

          <rect class="cls-33" x="0.5" y="0.5" width="63" height="79"/>

        </g>

        <g id="Rectangle_37" data-name="Rectangle 37" class="cls-25" transform="translate(144 144)">

          <rect class="cls-32" width="32" height="32"/>

          <rect class="cls-33" x="0.5" y="0.5" width="31" height="31"/>

        </g>

        <text id="X-4" data-name="X" class="cls-26" transform="translate(160 170)"><tspan x="-8.004" y="0">X</tspan></text>

        <circle id="Ellipse_24" data-name="Ellipse 24" class="cls-5" cx="6.5" cy="6.5" r="6.5" transform="translate(160 127)"/>

        <path id="Hand" class="cls-3" d="M1741.056-235c62.5,21.5,140.529,16,140.529,16s39-19,48-13,0,13,0,13l-29,6s43-6,54,0,0,11,0,11l-46,5s46,5,56,8,0,10,0,10-63-2-56,0,8,14.333,8,22-11,22-16,22-4-7-4-7,6-11,4-20-14.333-11.667-17.667-11-3.333,15-1.333,16-16.667,0-16.667,0l-4.333-5s-58.667-3-69.333-3.333-49.7-10.667-50.2-11.167S1741.056-235,1741.056-235Z" transform="translate(-1732.556 271)"/>

        <rect id="Rectangle_38" data-name="Rectangle 38" class="cls-17" width="17" height="118" transform="translate(81 233)"/>

        <rect id="Rectangle_39" data-name="Rectangle 39" class="cls-18" width="6" height="118" transform="translate(233 233)"/>

        <path id="Path_17" data-name="Path 17" class="cls-17" d="M2135.917,231.417,2148.2,208.6h-14.033l-15.083,22.817Z" transform="translate(-2038)"/>

        <path id="Path_18" data-name="Path 18" class="cls-18" d="M2141.857,231.417,2128,208.6h5.116l15.083,22.817Z" transform="translate(-1909)"/>

        <rect id="Rectangle_40" data-name="Rectangle 40" class="cls-17" width="5" height="78" transform="translate(129 115)"/>

        <rect id="Rectangle_41" data-name="Rectangle 41" class="cls-18" width="3" height="78" transform="translate(188 115)"/>

        <path id="Path_19" data-name="Path 19" class="cls-17" d="M2047.25,85.5A255.282,255.282,0,0,0,2080,91c19,2,89.143,2.857,96.143-.429s37.232,1.866,37.232,1.866,3.353.467,5.563,5.125a32.2,32.2,0,0,1,2.5,17.438c-2,12-13.333,20.9-15,20.563-.667-.133-2.312-.034-3.187-1.625-.941-1.7-1.238-5.1-.437-5.5.938-1.187,8.021-17.875.688-24.875s-14.4-6.6-16.062-5.625c-.84.493-2.362,5.2-2.312,9.25a29.908,29.908,0,0,0,.875,6.5h-7.75l-7.625-.312-4.187-4.937S2099,105.2,2093,104.6,2047.25,94,2047.25,94Z" transform="translate(-2038)"/>

      </g>

      <g id="window8" transform="translate(-84 207)">

        <g class="cls-45" transform="matrix(1, 0, 0, 1, 84, -207)">

          <g id="Rectangle_42-2" data-name="Rectangle 42" class="cls-3" transform="translate(167 284.72)">

            <rect class="cls-32" width="173" height="129.333"/>

            <rect class="cls-33" x="0.5" y="0.5" width="172" height="128.333"/>

          </g>

        </g>

        <g class="cls-44" transform="matrix(1, 0, 0, 1, 84, -207)">

          <g id="Rectangle_43-2" data-name="Rectangle 43" class="cls-3" transform="translate(166.79 261.19)">

            <rect class="cls-32" width="173" height="24.292"/>

            <rect class="cls-33" x="0.5" y="0.5" width="172" height="23.292"/>

          </g>

        </g>

        <g id="Rectangle_44" data-name="Rectangle 44" class="cls-4" transform="translate(250.793 55)">

          <rect class="cls-32" width="23.974" height="23.974"/>

          <rect class="cls-33" x="0.5" y="0.5" width="22.974" height="22.974"/>

        </g>

        <text id="X-5" data-name="X" class="cls-15" transform="translate(263.784 70.569)"><tspan x="-4.335" y="0">X</tspan></text>

        <line id="Line_16" data-name="Line 16" class="cls-16" x2="121.796" transform="translate(287.014 62.341)"/>

        <line id="Line_17" data-name="Line 17" class="cls-16" x2="121.796" transform="translate(287.014 70.332)"/>

        <text id="online_opinions" data-name="online
opinions" class="cls-26" transform="translate(337 126)"><tspan x="-50.516" y="0">online </tspan><tspan x="-61.711" y="33">opinions</tspan></text>

      </g>

    </g>

    <g id="Purchases" class="grow3">

      <g id="Anxiety" transform="translate(14 -25)">

        <g class="cls-43" transform="matrix(1, 0, 0, 1, -14, 25)">

          <g id="Rectangle_47-2" data-name="Rectangle 47" class="cls-3" transform="translate(1150 495)">

            <rect class="cls-32" width="144" height="40"/>

            <rect class="cls-33" x="0.5" y="0.5" width="143" height="39"/>

          </g>

        </g>

        <path id="Path_20" data-name="Path 20" class="cls-3" d="M3174,520l8-24h128l8,24Z" transform="translate(-2038 1)"/>

        <g id="Purchase">

          <path id="Union_8" data-name="Union 8" class="cls-25" d="M-2037.988,96V16.222c-.545-15.5,17.455-16,17.455-16s43.635-.5,61.09,0c16.458.471,17.4,13.833,17.451,15.778h0V96Z" transform="translate(3197.989 464)"/>

          <g id="Ellipse_25" data-name="Ellipse 25" class="cls-4" transform="translate(1176 480)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_28" data-name="Ellipse 28" class="cls-3" transform="translate(1176 504)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_29" data-name="Ellipse 29" class="cls-4" transform="translate(1176 528)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_34" data-name="Ellipse 34" class="cls-3" transform="translate(1176 552)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_30" data-name="Ellipse 30" class="cls-4" transform="translate(1200 504)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_31" data-name="Ellipse 31" class="cls-3" transform="translate(1224 504)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_32" data-name="Ellipse 32" class="cls-4" transform="translate(1224 528)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_36" data-name="Ellipse 36" class="cls-3" transform="translate(1224 552)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_33" data-name="Ellipse 33" class="cls-3" transform="translate(1200 528)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_35" data-name="Ellipse 35" class="cls-4" transform="translate(1200 552)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_26" data-name="Ellipse 26" class="cls-3" transform="translate(1200 480)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

          <g id="Ellipse_27" data-name="Ellipse 27" class="cls-4" transform="translate(1224 480)">

            <circle class="cls-32" cx="8" cy="8" r="8"/>

            <circle class="cls-33" cx="8" cy="8" r="7.5"/>

          </g>

        </g>

        <g class="cls-42" transform="matrix(1, 0, 0, 1, -14, 25)">

          <g id="Path_27-2" data-name="Path 27" class="cls-27" transform="translate(1150 534)">

            <path class="cls-32" d="M 143.5 161.5 L 0.5 161.5 L 0.5 0.5 L 143.5 0.5 L 143.5 161.5 Z"/>

            <path class="cls-34" d="M 1 1 L 1 161 L 143 161 L 143 1 L 1 1 M 0 0 L 144 0 L 144 162 L 0 162 L 0 0 Z"/>

          </g>

        </g>

        <g id="Rectangle_45" data-name="Rectangle 45" class="cls-4" transform="translate(1136 632)">

          <rect class="cls-32" width="144" height="89"/>

          <rect class="cls-33" x="0.5" y="0.5" width="143" height="88"/>

        </g>

        <text id="Whatever_Anxiety_Buys" data-name="Whatever
Anxiety Buys" class="cls-13" transform="translate(1208 591)"><tspan x="-34.722" y="0">Whatever </tspan><tspan x="-43.551" y="17">Anxiety Buys</tspan></text>

        <rect id="Rectangle_52" data-name="Rectangle 52" class="cls-28" width="7" height="87" transform="translate(1137 633)"/>

        <rect id="Rectangle_55" data-name="Rectangle 55" class="cls-29" width="7" height="87" transform="translate(1272 633)"/>

        <rect id="Rectangle_56" data-name="Rectangle 56" class="cls-17" width="7" height="72" transform="translate(1272 560)"/>

        <rect id="Rectangle_57" data-name="Rectangle 57" class="cls-17" width="7" height="37" transform="translate(1272 522)"/>

        <rect id="Rectangle_53" data-name="Rectangle 53" class="cls-18" width="7" height="72" transform="translate(1137 560)"/>

        <rect id="Rectangle_54" data-name="Rectangle 54" class="cls-18" width="7" height="36" transform="translate(1137 522)"/>

        <path id="Path_24" data-name="Path 24" class="cls-18" d="M3182,519.667l7-22h-7l-7,22Z" transform="translate(-2038)"/>

        <path id="Path_25" data-name="Path 25" class="cls-17" d="M3310,520.143l-8-22.714h7l8.143,22.714Z" transform="translate(-2038)"/>

      </g>

      <g id="Ego" transform="translate(115 28)">

        <g id="Rectangle_51" data-name="Rectangle 51" class="cls-3" transform="translate(963 539)">

          <rect class="cls-32" width="54" height="36" rx="8"/>

          <rect class="cls-33" x="0.5" y="0.5" width="53" height="35" rx="7.5"/>

        </g>

        <g id="details" transform="translate(0 -4.167)">

          <line id="Line_18" data-name="Line 18" class="cls-16" y2="15" transform="translate(990.5 551.5)"/>

          <line id="Line_22" data-name="Line 22" class="cls-16" y2="15" transform="translate(984.5 551.5)"/>

          <line id="Line_23" data-name="Line 23" class="cls-16" y2="15" transform="translate(978.5 551.5)"/>

          <line id="Line_24" data-name="Line 24" class="cls-16" y2="15" transform="translate(972.5 551.5)"/>

          <line id="Line_19" data-name="Line 19" class="cls-16" y2="15" transform="translate(996.5 551.5)"/>

          <line id="Line_20" data-name="Line 20" class="cls-16" y2="15" transform="translate(1002.5 551.5)"/>

          <line id="Line_21" data-name="Line 21" class="cls-16" y2="15" transform="translate(1008.5 551.5)"/>

        </g>

        <g class="cls-41" transform="matrix(1, 0, 0, 1, -115, -28)">

          <g id="Union_9-2" data-name="Union 9" class="cls-27" transform="translate(3062 582)">

            <path class="cls-32" d="M -1883.999755859375 157.5003967285156 L -2030.00048828125 157.5003967285156 C -2034.135498046875 157.5003967285156 -2037.499633789063 154.1358795166016 -2037.499633789063 150.0003204345703 L -2037.499633789063 57.99959564208984 C -2037.499633789063 57.59835815429688 -2037.467651367188 57.19551849365234 -2037.404663085938 56.80231857299805 L -2037.395385742188 56.74441528320313 L -2037.399658203125 56.68593597412109 C -2037.466064453125 55.79761505126953 -2037.499633789063 54.89393615722656 -2037.499633789063 53.99999618530273 C -2037.499633789063 50.34781646728516 -2037.066162109375 46.93367767333984 -2036.211181640625 43.85239791870117 C -2035.36474609375 40.80161666870117 -2034.076171875 37.97359848022461 -2032.38134765625 35.44687652587891 C -2030.702392578125 32.94403839111328 -2028.566772460938 30.65009689331055 -2026.033569335938 28.62875747680664 C -2023.525634765625 26.62765693664551 -2020.542114257813 24.82491683959961 -2017.165649414063 23.27065658569336 C -2013.835327148438 21.73763656616211 -2010.008544921875 20.39373588562012 -2005.79150390625 19.27627754211426 C -2001.653564453125 18.17975616455078 -1996.9951171875 17.26303672790527 -1991.945556640625 16.55153656005859 C -1982.14990234375 15.17133712768555 -1970.718994140625 14.50039672851563 -1956.999633789063 14.50039672851563 C -1943.280517578125 14.50039672851563 -1931.849731445313 15.17133712768555 -1922.054077148438 16.55153656005859 C -1917.004638671875 17.26303672790527 -1912.34619140625 18.17975616455078 -1908.208129882813 19.27627754211426 C -1903.991088867188 20.39373588562012 -1900.164306640625 21.73763656616211 -1896.833984375 23.27065658569336 C -1893.45751953125 24.82493591308594 -1890.473876953125 26.62765693664551 -1887.966064453125 28.62875747680664 C -1885.432739257813 30.65009689331055 -1883.296997070313 32.94405746459961 -1881.6181640625 35.44689559936523 C -1879.923217773438 37.97361755371094 -1878.634643554688 40.8016357421875 -1877.7880859375 43.85239791870117 C -1876.93310546875 46.93367767333984 -1876.499633789063 50.34783554077148 -1876.499633789063 53.99999618530273 C -1876.499633789063 54.89241790771484 -1876.533203125 55.79613494873047 -1876.599609375 56.68607711791992 L -1876.603881835938 56.74453735351563 L -1876.594604492188 56.80241775512695 C -1876.531616210938 57.19549560546875 -1876.499633789063 57.5982780456543 -1876.499633789063 57.99959564208984 L -1876.499633789063 150.0003204345703 C -1876.499633789063 154.1358795166016 -1879.864135742188 157.5003967285156 -1883.999755859375 157.5003967285156 Z"/>

            <path class="cls-34" d="M -1883.999755859375 157.0003967285156 C -1880.139892578125 157.0003967285156 -1876.999633789063 153.8601684570313 -1876.999633789063 150.0003204345703 L -1876.999633789063 57.99960327148438 C -1876.999633789063 57.62477111816406 -1877.029418945313 57.24860382080078 -1877.08837890625 56.88156509399414 L -1877.10693359375 56.76581192016602 L -1877.09814453125 56.6489372253418 C -1877.032836914063 55.7712287902832 -1876.999633789063 54.88000106811523 -1876.999633789063 54 C -1876.999633789063 50.39300155639648 -1877.427001953125 47.02383422851563 -1878.269897460938 43.986083984375 C -1879.10205078125 40.9869384765625 -1880.368286132813 38.20766830444336 -1882.033325195313 35.72543716430664 C -1883.683715820313 33.2651481628418 -1885.78466796875 31.00897979736328 -1888.27783203125 29.01960563659668 C -1890.754272460938 27.04366683959961 -1893.703247070313 25.26225090026855 -1897.043090820313 23.72483444213867 C -1900.347290039063 22.20381355285645 -1904.146850585938 20.86972999572754 -1908.336181640625 19.75960540771484 C -1912.455078125 18.66814613342285 -1917.093994140625 17.7553768157959 -1922.123901367188 17.04664611816406 C -1931.896118164063 15.6697301864624 -1943.304077148438 15.00039672851563 -1956.999633789063 15.00039672851563 C -1970.695434570313 15.00039672851563 -1982.103515625 15.6697301864624 -1991.875732421875 17.04664611816406 C -1996.90576171875 17.7553768157959 -2001.544555664063 18.66814613342285 -2005.663452148438 19.75960540771484 C -2009.852783203125 20.86970901489258 -2013.65234375 22.20381355285645 -2016.95654296875 23.72483444213867 C -2020.296264648438 25.26225090026855 -2023.245361328125 27.04366683959961 -2025.7216796875 29.01960563659668 C -2028.21484375 31.00897979736328 -2030.315795898438 33.2651481628418 -2031.966064453125 35.72541809082031 C -2033.631103515625 38.20764541625977 -2034.897216796875 40.9869384765625 -2035.729370117188 43.986083984375 C -2036.572265625 47.02383422851563 -2036.999633789063 50.39300155639648 -2036.999633789063 54 C -2036.999633789063 54.88158416748047 -2036.966430664063 55.77275085449219 -2036.901123046875 56.64873123168945 L -2036.892333984375 56.76568984985352 L -2036.910888671875 56.88150024414063 C -2036.969848632813 57.24854278564453 -2036.999633789063 57.62472915649414 -2036.999633789063 57.99960327148438 L -2036.999633789063 150.0003204345703 C -2036.999633789063 153.8601684570313 -2033.85986328125 157.0003967285156 -2030.00048828125 157.0003967285156 L -1883.999755859375 157.0003967285156 M -1883.999755859375 158.0003967285156 L -2030.00048828125 158.0003967285156 C -2034.418579101563 158.0003967285156 -2037.999633789063 154.4184112548828 -2037.999633789063 150.0003204345703 L -2037.999633789063 57.99960327148438 C -2037.999633789063 57.56518936157227 -2037.964965820313 57.1387939453125 -2037.898315429688 56.72316741943359 C -2037.965698242188 55.82052230834961 -2037.999633789063 54.91377258300781 -2037.999633789063 54 C -2037.999633789063 24.17671012878418 -2009.999755859375 14.00039672851563 -1956.999633789063 14.00039672851563 C -1904.00048828125 14.00039672851563 -1875.999633789063 24.17671012878418 -1875.999633789063 54 C -1875.999633789063 54.91377258300781 -1876.03369140625 55.82058334350586 -1876.100952148438 56.72322845458984 C -1876.034301757813 57.13885498046875 -1875.999633789063 57.56518936157227 -1875.999633789063 57.99960327148438 L -1875.999633789063 150.0003204345703 C -1875.999633789063 154.4184112548828 -1879.581665039063 158.0003967285156 -1883.999755859375 158.0003967285156 Z"/>

          </g>

        </g>

        <g id="Rectangle_49" data-name="Rectangle 49" class="cls-25" transform="translate(909 621)">

          <rect class="cls-32" width="162" height="64"/>

          <rect class="cls-33" x="0.5" y="0.5" width="161" height="63"/>

        </g>

        <g id="Rectangle_50" data-name="Rectangle 50" class="cls-4" transform="translate(909 621)">

          <rect class="cls-32" width="64" height="64"/>

          <rect class="cls-33" x="0.5" y="0.5" width="63" height="63"/>

        </g>

        <text id="B_" data-name="B+" class="cls-26" transform="translate(941 663)"><tspan x="-15.056" y="0">B+</tspan></text>

        <text id="Whatever_boosts_ego" data-name="Whatever
boosts ego" class="cls-13" transform="translate(1022 649)"><tspan x="-34.722" y="0">Whatever </tspan><tspan x="-38.353" y="17">boosts ego</tspan></text>

      </g>

      <g id="window9" transform="translate(40 24)">

        <g class="cls-40" transform="matrix(1, 0, 0, 1, -40, -24)">

          <g id="Rectangle_58-3" data-name="Rectangle 58" class="cls-3" transform="translate(932.98 472.65)">

            <rect class="cls-32" width="200" height="68.353"/>

            <rect class="cls-33" x="0.5" y="0.5" width="199" height="67.353"/>

          </g>

        </g>

        <g id="Rectangle_59" data-name="Rectangle 59" class="cls-4" transform="translate(892.98 426)">

          <rect class="cls-32" width="200" height="23.333"/>

          <rect class="cls-33" x="0.5" y="0.5" width="199" height="22.333"/>

        </g>

        <circle id="Ellipse_37" data-name="Ellipse 37" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(899.47 433.549)"/>

        <circle id="Ellipse_38" data-name="Ellipse 38" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(914.569 433.549)"/>

        <circle id="Ellipse_39" data-name="Ellipse 39" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(929.851 432.863)"/>

        <line id="Line_25" data-name="Line 25" class="cls-6" x2="129.02" transform="translate(956.725 435.265)"/>

        <line id="Line_26" data-name="Line 26" class="cls-6" x2="129.02" transform="translate(956.725 440.755)"/>

        <text id="online_purchases" data-name="online purchases" class="cls-30" transform="translate(993 489)"><tspan x="-80.924" y="0">online purchases</tspan></text>

      </g>

    </g>

    <g id="location" class="grow">

      <g class="cls-39" transform="matrix(1, 0, 0, 1, 0, 0)">

        <g id="Rectangle_60-2" data-name="Rectangle 60" class="cls-3" transform="translate(395 69.72)">

          <rect class="cls-32" width="239" height="129.333"/>

          <rect class="cls-33" x="0.5" y="0.5" width="238" height="128.333"/>

        </g>

      </g>

      <g class="cls-38" transform="matrix(1, 0, 0, 1, 0, 0)">

        <g id="Rectangle_61-2" data-name="Rectangle 61" class="cls-3" transform="translate(394.79 46.19)">

          <rect class="cls-32" width="239" height="24.292"/>

          <rect class="cls-33" x="0.5" y="0.5" width="238" height="23.292"/>

        </g>

      </g>

      <g id="Rectangle_62" data-name="Rectangle 62" class="cls-4" transform="translate(394.793 45.905)">

        <rect class="cls-32" width="23.974" height="23.974"/>

        <rect class="cls-33" x="0.5" y="0.5" width="22.974" height="22.974"/>

      </g>

      <text id="X-6" data-name="X" class="cls-15" transform="translate(407.784 62.569)"><tspan x="-4.335" y="0">X</tspan></text>

      <line id="Line_27" data-name="Line 27" class="cls-16" x2="121.796" transform="translate(497.014 54.341)"/>

      <line id="Line_28" data-name="Line 28" class="cls-16" x2="121.796" transform="translate(497.014 62.332)"/>

      <g id="globe">

        <g id="Ellipse_40" data-name="Ellipse 40" class="cls-25" transform="translate(416 88)">

          <circle class="cls-32" cx="48" cy="48" r="48"/>

          <circle class="cls-33" cx="48" cy="48" r="47.5"/>

        </g>

        <g id="Ellipse_41" data-name="Ellipse 41" class="cls-12" transform="translate(440 88)">

          <ellipse class="cls-32" cx="24" cy="48" rx="24" ry="48"/>

          <ellipse class="cls-33" cx="24" cy="48" rx="23.5" ry="47.5"/>

        </g>

        <g id="Ellipse_42" data-name="Ellipse 42" class="cls-12" transform="translate(416 112)">

          <ellipse class="cls-32" cx="48" cy="24" rx="48" ry="24"/>

          <ellipse class="cls-33" cx="48" cy="24" rx="47.5" ry="23.5"/>

        </g>

        <line id="Line_29" data-name="Line 29" class="cls-12" y2="96" transform="translate(464 88)"/>

        <line id="Line_30" data-name="Line 30" class="cls-12" x2="96" transform="translate(416 136)"/>

        <circle id="Ellipse_43" data-name="Ellipse 43" class="cls-5" cx="4" cy="4" r="4" transform="translate(472 144)"/>

      </g>

      <text id="location_history" data-name="location
history" class="cls-30" transform="translate(571 129)"><tspan x="-44.502" y="0">location </tspan><tspan x="-35.025" y="22">history</tspan></text>

    </g>

    <g id="Placeholder">

      <rect id="Rectangle_64" data-name="Rectangle 64" class="cls-17" width="25" height="25" transform="translate(860 180)"/>

      <rect id="Rectangle_65" data-name="Rectangle 65" class="cls-17" width="26" height="26" transform="translate(443 285)"/>

      <rect id="Rectangle_66" data-name="Rectangle 66" class="cls-17" width="15" height="15" transform="translate(1055 377)"/>

      <rect id="Rectangle_67" data-name="Rectangle 67" class="cls-17" width="18" height="18" transform="translate(962 713)"/>

      <rect id="Rectangle_68" data-name="Rectangle 68" class="cls-17" width="13" height="13" transform="translate(714 37)"/>

      <rect id="Rectangle_69" data-name="Rectangle 69" class="cls-17" width="9" height="9" transform="translate(538 731)"/>

      <rect id="Rectangle_70" data-name="Rectangle 70" class="cls-17" width="20" height="20" transform="translate(59 427)"/>

      <rect id="Rectangle_71" data-name="Rectangle 71" class="cls-17" width="16" height="16" transform="translate(27 724)"/>

      <rect id="Rectangle_72" data-name="Rectangle 72" class="cls-17" width="10" height="10" transform="translate(1326 316)"/>

      <rect id="Rectangle_73" data-name="Rectangle 73" class="cls-17" width="12" height="12" transform="translate(1319 21)"/>

      <rect id="Rectangle_74" data-name="Rectangle 74" class="cls-17" width="10" height="10" transform="translate(1326 731)"/>

      <rect id="Rectangle_75" data-name="Rectangle 75" class="cls-17" width="19" height="19" transform="translate(834 517)"/>

      <rect id="Rectangle_76" data-name="Rectangle 76" class="cls-17" width="16" height="16" transform="translate(469 479)"/>

      <rect id="Rectangle_77" data-name="Rectangle 77" class="cls-17" width="16" height="16" transform="translate(285 133)"/>

      <rect id="Rectangle_78" data-name="Rectangle 78" class="cls-17" width="15" height="15" transform="translate(1294 411)"/>

      <rect id="Rectangle_80" data-name="Rectangle 80" class="cls-17" width="16" height="16" transform="translate(594 557)"/>

      <rect id="Rectangle_81" data-name="Rectangle 81" class="cls-17" width="13" height="13" transform="translate(727 180)"/>

    </g>

    <g id="window10" transform="translate(-259 184)">

      <g class="cls-37" transform="matrix(1, 0, 0, 1, 259, -184)">

        <g id="Rectangle_58-4" data-name="Rectangle 58" class="cls-3" transform="translate(633.98 632.65)">

          <rect class="cls-32" width="200" height="68.353"/>

          <rect class="cls-33" x="0.5" y="0.5" width="199" height="67.353"/>

        </g>

      </g>

      <g id="Rectangle_59-2" data-name="Rectangle 59" class="cls-4" transform="translate(892.98 426)">

        <rect class="cls-32" width="200" height="23.333"/>

        <rect class="cls-33" x="0.5" y="0.5" width="199" height="22.333"/>

      </g>

      <circle id="Ellipse_37-2" data-name="Ellipse 37" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(899.47 433.549)"/>

      <circle id="Ellipse_38-2" data-name="Ellipse 38" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(914.569 433.549)"/>

      <circle id="Ellipse_39-2" data-name="Ellipse 39" class="cls-5" cx="4.804" cy="4.804" r="4.804" transform="translate(929.851 432.863)"/>

      <line id="Line_25-2" data-name="Line 25" class="cls-6" x2="129.02" transform="translate(956.725 435.265)"/>

      <line id="Line_26-2" data-name="Line 26" class="cls-6" x2="129.02" transform="translate(956.725 440.755)"/>

      <text id="AM_I_FORGETTING_SOMETHING_" data-name="AM I FORGETTING
SOMETHING?" class="cls-30" transform="translate(993 478)"><tspan x="-73.909" y="0">AM I FORGETTING </tspan><tspan x="-53.177" y="22">SOMETHING?</tspan></text>

    </g>
    <clipPath id="clip-tracker">
    <path id="tracker" class="cls-31" d="M-2038,873.841l179.791-786.589q-.048-1.43-.048-2.872A83.881,83.881,0,0,1-1774.376.5,83.881,83.881,0,0,1-1690.5,84.38h2.114l169.17,789.46Z" transform="matrix(-0.643, 0.766, -0.766, -0.643, -389.618, 1796.105)"/>
    </clipPath>

  </g>

    <g id="Eye">

      <g class="cls-36" transform="matrix(1, 0, 0, 1, 0, 0)">

        <path id="Intersection_1-2" data-name="Intersection 1" class="cls-23" d="M-2032.9,209.06A150.069,150.069,0,0,1-1888,98a150.069,150.069,0,0,1,144.9,111.06A150.069,150.069,0,0,1-1888,320.119,150.069,150.069,0,0,1-2032.9,209.06Z" transform="translate(2570.9 175)"/>

      </g>

      <circle id="Ellipse_3" data-name="Ellipse 3" class="cls-17" cx="60" cy="60" r="60" transform="translate(623 324)"/>

      <circle id="Ellipse_4" data-name="Ellipse 4" class="cls-5" cx="30" cy="30" r="30" transform="translate(653 354)"/>

    </g>

  </g>

</svg>

<script src="ideo.js"></script>


</body>
</html>
!

CSS 

              
                
html {
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: #83bff0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23033da9' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  cursor: crosshair;
}



img {
  margin: 0;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 911px;
  height: 511px;
}

svg {
  margin: 0;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}

#Ellipse_3 {
  --look: 0.5;
  transform: translate(calc(563px + 120px * var(--mouse-x)), calc(294px + 60px * var(--mouse-y)));
}

#Ellipse_4 {
  transform: translate(calc(575px + 150px * var(--mouse-x)), calc(312px + 90px * var(--mouse-y)));
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.grow2 {
  transition: all .2s ease-in-out;
  transform-origin: top right;
 }
.grow2:hover { transform: scale(1.1); }

.grow3 {
  transition: all .2s ease-in-out;
  transform-origin: bottom right;
 }
.grow3:hover { transform: scale(1.1); }

.grow4 {
  transition: all .2s ease-in-out;
  transform-origin: bottom left;
 }
.grow4:hover { transform: scale(1.1); }
!

JS 

              
                var root = document.documentElement;

document.addEventListener("mousemove", evt => {
  let x = evt.clientX / innerWidth;
  let y = evt.clientY / innerHeight;

  root.style.setProperty("--mouse-x", x);
  root.style.setProperty("--mouse-y", y);
});
!
999px

Console