Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

Save Automatically?

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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