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 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.

+ 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.

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

              
                <header class="top-header">
</header>
<div class="lamp__wrap">
  <div class="lamp">
    <div class="cable"></div>
    <div class="cover"></div>
    <div class="in-cover">
      <div class="bulb"></div>
    </div>
    <div class="light"></div>
  </div>
</div>



<div class="maindiv"></div>
<div class="fanPosition"> 
<svg width="100%" height="200" viewBox="0 0 359 509" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Page 1">
<g id="001   Fan">
<path id="Shape" d="M349.883 178.26C349.915 253.715 299.75 320.102 226.833 341.102C195.741 350.149 162.692 350.149 131.601 341.102C47.0558 316.688 -4.92999 232.361 11.5761 146.408C28.0822 60.455 107.663 1.08657 195.311 9.33867C282.96 17.5908 349.909 90.7549 349.883 178.26V178.26Z" fill="#CFD8DC"/>
<path id="Shape_2" d="M179.217 8.63211C174.899 8.63211 170.683 8.96288 166.417 9.2767C248.705 15.3743 314.797 79.1546 323.356 160.727C331.915 242.3 280.485 318.261 201.233 341.102C189.882 344.412 178.212 346.522 166.417 347.396C170.683 347.709 174.95 347.887 179.217 347.887C195.333 347.9 211.368 345.615 226.833 341.102C308.337 317.475 359.974 237.896 348.01 154.355C336.045 70.8137 264.117 8.71635 179.217 8.63211V8.63211Z" fill="#9E9E9E"/>
<path id="Shape_3" d="M218.47 407.257H139.963C134.895 407.264 130.086 405.031 126.839 401.165C123.591 397.298 122.24 392.196 123.153 387.241L125.713 373.332L131.601 341.102C162.692 350.149 195.741 350.149 226.833 341.102L232.721 373.332L235.281 387.241C236.193 392.196 234.842 397.298 231.594 401.165C228.347 405.031 223.538 407.264 218.47 407.257Z" fill="#9E9E9E"/>
<path id="Shape_4" d="M315.75 458.145H42.6832L75.8779 392.075C81.6961 380.607 93.5049 373.362 106.427 373.331H125.713L123.153 387.241C122.24 392.196 123.591 397.297 126.839 401.164C130.086 405.031 134.895 407.264 139.963 407.257H218.47C223.538 407.264 228.347 405.031 231.594 401.164C234.842 397.297 236.193 392.196 235.281 387.241L232.721 373.331H252.006C264.928 373.362 276.737 380.607 282.555 392.075L315.75 458.145Z" fill="#CFD8DC"/>
<path id="Shape_5" d="M97.5525 387.241C96.6403 392.196 97.9908 397.297 101.239 401.164C104.486 405.031 109.295 407.264 114.363 407.257H139.963C134.895 407.264 130.086 405.031 126.839 401.164C123.591 397.297 122.24 392.196 123.153 387.241L125.713 373.331H106.427C104.262 373.354 102.105 373.584 99.9845 374.018L97.5525 387.241Z" fill="#9E9E9E"/>
<path id="Shape_6" d="M282.555 392.075C276.737 380.607 264.928 373.362 252.006 373.331H232.721L232.849 374.018C243.26 376.011 252.159 382.677 256.955 392.075L290.15 458.145H315.75L282.555 392.075Z" fill="#9E9E9E"/>
<path id="Shape_7" d="M315.75 458.145V483.589C315.722 492.946 308.097 500.524 298.683 500.552H59.7499C50.3359 500.524 42.7113 492.946 42.6832 483.589V458.145H315.75Z" fill="#0377BC"/>
<g id="Group 1">
<path id="Shape_8" d="M221.883 178.26C221.822 201.655 202.755 220.606 179.217 220.667C176.609 220.669 174.008 220.413 171.451 219.903C149.904 215.787 135.011 196.098 137.017 174.381C139.024 152.664 157.275 136 179.217 135.853C181.824 135.85 184.425 136.106 186.982 136.616C202.321 139.396 214.897 150.301 219.75 165.029C221.156 169.3 221.875 173.765 221.883 178.26Z" fill="#F5F5F5"/>
<path id="Shape_9" d="M219.75 165.029C214.897 150.301 202.321 139.396 186.982 136.616C184.425 136.106 181.824 135.85 179.217 135.853C174.843 135.86 170.497 136.538 166.331 137.863C179.478 141.9 189.845 152.014 194.15 165.003C195.558 169.283 196.278 173.757 196.283 178.26C196.24 196.755 184.161 213.096 166.417 218.665C168.062 219.178 169.738 219.592 171.434 219.903C173.996 220.415 176.603 220.67 179.217 220.667C202.755 220.606 221.822 201.655 221.883 178.26C221.875 173.765 221.156 169.3 219.75 165.029V165.029Z" fill="#CFD8DC"/>
</g>
<g id="Group">
<path id="Shape_10" d="M121.873 346.853L118.579 364.85H106.427C90.3022 364.952 75.5838 373.994 68.2832 388.284L35.08 454.354C35.0373 454.456 35.0203 454.566 34.9776 454.668C34.9349 454.77 34.8496 455.05 34.7728 455.237C34.4689 456.053 34.2933 456.911 34.2523 457.781C34.2523 457.891 34.184 457.993 34.184 458.112V483.556C34.184 497.608 45.6455 509 59.784 509H298.683C312.822 509 324.283 497.608 324.283 483.556V458.146C324.283 458.027 324.223 457.925 324.215 457.815C324.174 456.945 323.998 456.087 323.694 455.27C323.618 455.084 323.575 454.889 323.49 454.702C323.404 454.516 323.43 454.49 323.387 454.388L290.15 388.259C282.842 373.978 268.125 364.947 252.006 364.85H239.854L236.561 346.853C319.701 318.942 370.274 235.296 356.045 149.23C341.816 63.1631 266.971 0 179.217 0C91.4617 0 16.617 63.1631 2.3879 149.23C-11.8412 235.296 38.7321 318.942 121.873 346.853V346.853ZM307.217 483.59C307.217 488.274 303.396 492.071 298.683 492.071H59.7499C55.037 492.071 51.2165 488.274 51.2165 483.59V466.627H307.217V483.59ZM252.006 381.813C261.687 381.868 270.528 387.291 274.918 395.867L301.951 449.664H56.4816L83.4981 395.892C87.8872 387.303 96.7352 381.871 106.427 381.813H115.481L114.764 385.723C113.399 393.151 115.424 400.798 120.292 406.596C125.159 412.394 132.366 415.743 139.963 415.739H218.47C226.062 415.738 233.263 412.387 238.126 406.592C242.989 400.797 245.013 393.155 243.652 385.732L242.952 381.813H252.006ZM226.875 388.776C227.328 391.253 226.652 393.801 225.028 395.732C223.405 397.664 221.002 398.779 218.47 398.776H139.963C137.432 398.774 135.032 397.656 133.412 395.723C131.792 393.79 131.119 391.242 131.575 388.768L138.402 351.518C165.245 357.986 193.256 357.986 220.1 351.518L226.875 388.776ZM179.217 17.1135C268.76 17.1135 341.35 89.2612 341.35 178.26C341.35 267.259 268.76 339.406 179.217 339.406C89.6727 339.406 17.0832 267.259 17.0832 178.26C17.1819 89.3019 89.7137 17.2116 179.217 17.1135Z" fill="black"/>
<g id="fan">
<path id="Shape_11" d="M186.982 136.616C184.425 136.106 181.824 135.85 179.217 135.853C166.869 135.836 155.126 141.161 147.046 150.441C121.19 125.76 91.3232 91.0711 104.294 71.7336C125.798 39.6739 201.062 28.9874 233.318 61.047C259.857 87.4241 184.593 84.8797 186.982 136.616Z" fill="#02A9F4"/>
<path id="Shape_12" d="M179.217 135.853C181.824 135.85 184.425 136.106 186.982 136.616C184.593 84.8797 259.857 87.4241 233.318 61.047C217.019 44.8476 189.747 39.5891 163.967 42.4643C180.237 43.6004 195.647 50.1461 207.718 61.047C234.257 87.4241 158.993 84.8797 161.382 136.616L179.217 135.853Z" fill="#0377BC"/>
<path id="Shape_13" d="M171.451 219.903C163.003 254.592 147.558 298.356 124.091 296.999C85.3498 294.54 38.5018 235 50.1925 191.236C59.9205 155.19 95.4192 221.345 139.366 193.357C144.638 207.185 156.813 217.258 171.451 219.903V219.903Z" fill="#02A9F4"/>
<path id="Shape_14" d="M149.29 204.552C143.129 234.542 130.363 281.241 110.037 293.776C114.534 295.539 119.271 296.625 124.091 296.999C147.558 298.356 163.003 254.592 171.451 219.903L149.29 204.552Z" fill="#0377BC"/>
<path id="Shape_15" d="M255.163 283.683C218.726 293.522 259.089 229.233 211.729 205.655C218.285 198.014 221.885 188.301 221.883 178.26C221.875 173.765 221.156 169.3 219.75 165.029C254.225 155.021 299.963 146.37 310.289 167.319C327.526 201.838 299.11 271.979 255.163 283.683Z" fill="#02A9F4"/>
<path id="Shape_16" d="M310.289 167.319C304.23 155.029 285.977 152.96 264.977 155.343C273.134 155.855 280.511 160.336 284.689 167.319C300.518 199.014 277.811 260.614 239.974 279.561C242.15 284.116 246.451 286.033 255.163 283.683C299.11 271.979 327.526 201.838 310.289 167.319Z" fill="#0377BC"/>
<path id="Shape_17" d="M98.9093 298.051C106.53 302.204 114.938 304.735 123.596 305.481H125.201C146.875 305.481 164.582 279.74 177.902 229.046C178.346 229.046 178.756 229.114 179.217 229.114C191.657 229.114 203.668 224.588 212.983 216.392C221.511 222.587 226.948 232.127 227.908 242.583C219.381 249.155 209.578 253.902 199.116 256.526C196.727 257.137 194.346 257.595 191.889 257.976C187.486 258.66 184.355 262.596 184.699 267.011C185.043 271.426 188.747 274.835 193.203 274.837C193.648 274.837 194.093 274.803 194.534 274.736C197.538 274.269 200.447 273.701 203.289 272.98C212.377 270.672 221.075 267.049 229.102 262.225C229.085 266.912 229.428 271.593 230.126 276.228C214.505 284.643 196.983 288.96 179.217 288.772H178.193C173.48 288.772 169.659 292.569 169.659 297.254C169.659 301.938 173.48 305.735 178.193 305.735H179.217C200.188 305.929 220.854 300.728 239.206 290.638C242.021 292.314 245.243 293.193 248.524 293.183C251.519 293.138 254.495 292.699 257.373 291.876C279.739 285.939 300.603 265.822 313.19 238.121C325.521 210.981 327.338 182.39 317.951 163.587C307.993 143.367 277.393 140.526 224.639 154.868C218.565 143.279 208.257 134.441 195.831 130.17C197.253 119.727 203.084 110.38 211.865 104.472C221.641 108.647 230.492 114.699 237.909 122.283C239.72 124.17 241.43 126.152 243.029 128.22C245.922 131.92 251.286 132.588 255.01 129.712C258.733 126.836 259.405 121.505 256.511 117.804C254.534 115.267 252.426 112.833 250.197 110.51C243.747 103.913 236.389 98.2558 228.343 93.7089C232.396 91.4124 236.244 88.7765 239.846 85.8297C245.239 89.2693 250.321 93.1685 255.035 97.4831C263.615 105.443 270.898 114.679 276.625 124.861C278.135 127.545 280.988 129.207 284.083 129.203C285.536 129.207 286.965 128.836 288.23 128.126C292.343 125.844 293.817 120.681 291.524 116.592C284.942 104.881 276.568 94.2597 266.7 85.1087C260.738 79.6516 254.263 74.7751 247.364 70.5462C246.788 64.5591 243.919 59.0208 239.351 55.0762C222.975 38.8004 195.046 30.8618 164.684 33.8727C134.818 36.8073 108.962 49.5293 97.1941 67.0688C84.6672 85.7279 97.3563 113.386 135.825 151.408C128.699 162.633 126.325 176.202 129.22 189.158C119.314 193.145 108.169 192.747 98.5765 188.064C98.0866 184.805 97.8583 181.512 97.8939 178.217C97.8771 170.764 98.8936 163.344 100.915 156.166C101.596 153.639 102.431 151.155 103.415 148.728C105.189 144.388 103.088 139.44 98.7216 137.676C94.3552 135.913 89.377 138.001 87.6027 142.341C86.375 145.37 85.3292 148.468 84.4709 151.62C82.0366 160.266 80.8106 169.205 80.8272 178.183V178.981C76.8057 176.634 72.5821 174.647 68.2064 173.044C68.4265 166.704 69.2349 160.398 70.6213 154.207C73.2381 142.628 77.6912 131.537 83.8139 121.35C85.4326 118.741 85.5091 115.467 84.014 112.786C82.5189 110.105 79.6848 108.435 76.6009 108.417C73.5171 108.399 70.6634 110.036 69.1365 112.699C62.1054 124.406 56.9953 137.152 53.9984 150.458C52.2039 158.393 51.2232 166.489 51.0715 174.621C46.3453 178.144 43.0963 183.28 41.9493 189.04C35.976 211.346 43.1099 239.411 60.9957 264.125C70.8569 278.167 83.8274 289.773 98.9093 298.051V298.051ZM302.643 171.093C309.725 185.274 307.763 208.844 297.625 231.141C287.129 254.253 270.429 270.843 252.927 275.499C251.407 275.957 249.831 276.211 248.243 276.254H247.825C246.364 271.071 245.788 265.681 246.118 260.309C245.828 243.346 245.341 218.75 223.82 203.119C229.413 193.4 231.519 182.081 229.794 171.017C277 158.371 298.419 162.527 302.643 171.093V171.093ZM213.35 178.26C213.35 196.996 198.068 212.185 179.217 212.185C160.365 212.185 145.083 196.996 145.083 178.26C145.083 159.523 160.365 144.334 179.217 144.334C198.068 144.334 213.35 159.523 213.35 178.26ZM111.394 76.4832C120.26 63.2692 141.841 53.1678 166.365 50.7507C191.692 48.2741 214.485 54.3722 227.285 67.0858C228.552 68.2532 229.629 69.6095 230.476 71.106C226.687 74.9551 222.274 78.1433 217.42 80.5373C203.007 89.1204 182.05 101.673 178.858 127.431C167.306 127.502 156.122 131.473 147.14 138.694C117.922 109.561 104.61 86.5591 111.394 76.4408V76.4832ZM58.4357 193.433C58.8174 191.758 59.4594 190.153 60.3387 188.675C65.6228 189.944 70.6289 192.163 75.1099 195.223C89.8811 203.39 111.445 215.23 135.628 204.857C141.566 214.444 150.523 221.811 161.109 225.815C148.633 272.666 133.99 288.967 124.603 288.518C108.714 287.509 89.1728 274.049 74.8197 254.219C59.912 233.601 53.7765 210.862 58.4357 193.433V193.433Z" fill="black"/>
</g>
<path id="Oval" d="M145.083 441.183C149.796 441.183 153.617 437.385 153.617 432.701C153.617 428.017 149.796 424.22 145.083 424.22C140.37 424.22 136.55 428.017 136.55 432.701C136.55 437.385 140.37 441.183 145.083 441.183Z" fill="black"/>
<path id="Oval_2" d="M179.217 441.183C183.929 441.183 187.75 437.385 187.75 432.701C187.75 428.017 183.929 424.22 179.217 424.22C174.504 424.22 170.683 428.017 170.683 432.701C170.683 437.385 174.504 441.183 179.217 441.183Z" fill="black"/>
<path id="Oval_3" d="M213.35 441.183C218.063 441.183 221.883 437.385 221.883 432.701C221.883 428.017 218.063 424.22 213.35 424.22C208.637 424.22 204.817 428.017 204.817 432.701C204.817 437.385 208.637 441.183 213.35 441.183Z" fill="black"/>
</g>
</g>
</g>
</svg>

  </div>
<div class="footer"></div>
              
            
!

CSS

              
                *
{
  margin:0;
  padding:0;
}

body {
  padding: 0;
  margin: 0;
  background: #181828;
  font-size: 14px;
  line-height: 1;
}


.top-header:before {
    background-image: url(https://1.bp.blogspot.com/-gxsOcYWghHA/Xp_izTh4sFI/AAAAAAAAU8s/y637Fwg99qAuzW9na_NT_uApny8Vce95gCEwYBhgL/s1600/header-footer-gradient-bg.png);
}
.top-header:before {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-repeat: repeat-x;
    background-size: contain;
    position: fixed;
    top: 0;
    left: 0;
  opacity:0.5;
}


/* 2.3. Lamp */
.lamp {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  margin: 0px auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center top;
}

.lamp__wrap
{
  height:100vh;
}

.lampMove
{
  animation-timing-function: cubic-bezier(0.6, 0, 0.38, 1);
  animation: move 5.1s infinite;
}

@keyframes move {
  0% {
    transform: rotate(40deg);
  }
  50% {
    transform: rotate(-40deg);
  }
  100% {
    transform: rotate(40deg);
  }
}

.cable {
  width: 8px;
    height: 248px;
    background-image: linear-gradient(rgb(32 148 218 / 70%), rgb(193 65 25)), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
}

.cover {
  width: 200px;
  height: 80px;
  background: #0bd5e8;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  position: relative;
  z-index: 200;
}

.in-cover {
  width: 100%;
  max-width: 200px;
  height: 20px;
  border-radius: 100%;
  background: #08ffff;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  bottom: -9px;
  z-index: 100;
}
.in-cover .bulb {
     width: 50px;
    height: 50px;
    background-color: #08fffa;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -20px;
    margin: 0px auto;
    -webkit-box-shadow: 0 0 15px 7px rgba(0,255,255,0.8), 0 0 40px 25px rgba(0,255,255,0.5), -75px 0 30px 15px rgba(0,255,255,0.2);
    box-shadow: 0 0 25px 7px rgb(127 255 255 / 80%), 0 0 64px 47px rgba(0,255,255,0.5), 0px 0 30px 15px rgba(0,255,255,0.2);
}




.light {
      width: 200px;
    height: 0px;
    border-bottom: 900px solid rgb(44 255 255 / 24%);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 270px;
    margin: 0px auto;
    z-index: 1;
    border-radius: 90px 90px 0px 0px;
}

@media (max-width: 1400px) { 
  .lamp {
    zoom: .5;
  }
  
}

@media (max-width: 950px) {
  .lamp__wrap {
    max-height: 100vh;
    overflow: hidden;
    max-width: 100vw;
  }
}

@media (max-width: 650px) {
 
  .lamp {
    zoom: .6;
  }
  }

/************end---*/

.fanPosition
{
  position:absolute;
  right:0;
  bottom:0;
}

.maindiv
{
  height:300px;
  width:100%;
  float:left;
}

.footer
{
  height:400px;
  width:100%;
  float:left;
  background-color:green;
}
.fanPosition
{
    height: 100vh;
    position: relative;
    background: radial-gradient(at 50% -20%, #452f69, #0a1832) fixed;
    z-index: -1;
    float: left;
    width: 100%;
}


.fanPosition svg
{
  position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
}

.active {
    transform-origin: 49% 53%;
    transform-box: fill-box;
  
	-webkit-animation: rotate-center 1s linear infinite both;
	        animation: rotate-center 1s linear infinite both;
}




/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

              
            
!

JS

              
                gsap.registerPlugin(ScrollTrigger);

const lamp = document.querySelector(".lamp");

gsap.set(fan, {perspectiveOrigin: "center 100vh"});

ScrollTrigger.create({
  toggleClass: "active",
  trigger: "#fan",
  start: "top 85%", //when top of fan passes 75% viewport height
  end: "bottom 45%", //when bottom of fan passes 25% viewport height
  onEnter: () => lamp.classList.add("lampMove"),
  onEnterBack: () => lamp.classList.add("lampMove"),
  onLeave: () => lamp.classList.remove("lampMove"),
  onLeaveBack: () => lamp.classList.remove("lampMove"),
});

              
            
!
999px

Console