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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                #fullwrap
  .box
    .speaker
    .dials
  .wrap
    .inner
      %svg{:viewbox => "0 0 1200 824"}
        %defs
          %mask#lettermask{:maskcontentunits => "userSpaceOnUse", :maskunits => "userSpaceOnUse"}
            %image.maskimg{:height => "100%", :width => "100%", "xlink:href" => "https://assets.codepen.io/383755/black.png", :y => "-45"}
        %g{:mask => "url(#lettermask)"}
          %foreignobject{:height => "824", :style => "background:url('https://i.gifer.com/origin/8a/8ad7bd58e7556d95afa5528eb43113a9_w200.gif') 50% 50% / 400px 400px", :width => "1200"}
    %img{:src => "https://assets.codepen.io/383755/codepenradiogif.gif"}/
    .inner.static
    .inner.static
    .inner.static
    .inner.static
    .box
  %svg#ontv{:height => "714px", :version => "1.1", :viewbox => "0 0 878 714", :width => "878px", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink"}
    %g#Artboard{:fill => "none", "fill-rule" => "evenodd", :stroke => "none", "stroke-width" => "1"}
      %image#Bitmap{:height => "166", :mask => "url(#strokemask)", :width => "284", :x => "39", "xlink:href" => "data:image/png;base64,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", :y => "119"}
      %image#Bitmap{:height => "464", :mask => "url(#strokemask)", :width => "588", :x => "257", "xlink:href" => "data:image/png;base64,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", :y => "144"}
      %mask#strokemask{:maskcontentunits => "userSpaceOnUse", :maskunits => "userSpaceOnUse"}
        %path#Path1{:d => "M173.804688,188.84375 C164.923466,168.36598 154.145862,141.356357 131.714844,131.851562 C107.285551,121.50003 64.2645115,142.583389 54.6328125,166.328125 C49.0027085,180.20785 51.2209851,202.350873 55.859375,216.230469 C59.8886319,228.287338 81.8242623,260.79405 94.875,262.921875 C106.139021,264.758389 117.69487,263.874128 129.105469,263.652344 C143.514685,263.372276 149.654199,264.088865 159.660156,253.976563 C164.68726,248.89603 170.110188,243.6388 172.757813,237 C180.106653,218.57311 166.360118,210.386271 188.804688,208.367188 C191.381493,208.135382 192.711623,214.096056 192.773438,226.355469 C192.816701,234.935828 192.735588,243.527913 192.171875,252.089844 C191.877342,256.563345 190.471785,269.869661 190.203125,265.394531 C189.561557,254.707806 181.098072,184.440117 212.390625,186.363281 C215.852671,186.57605 218.018988,190.830649 219.488281,193.972656 C224.187841,204.022423 226.285139,215.126273 230.617188,225.339844 C233.09968,231.192759 237.239327,236.230426 239.867188,242.019531 C242.599656,248.039084 240.038527,260.553829 246.648438,260.65625 C254.310127,260.774969 256.728394,248.987729 260.539063,242.339844 C282.625227,203.80952 283.953707,185.949475 312.722656,152.003906 C315.222298,149.054485 319.892666,148.961931 323.6875,148.222656 C326.012585,147.769704 328.492429,147.904149 330.789063,148.484375 C332.552522,148.929899 334.308328,149.850528 335.515625,151.210938 C337.356898,153.285725 338.734339,155.819521 339.628906,158.445312 C343.159144,168.807495 346.946599,179.199295 348.730469,190 C349.931481,197.271706 349.401802,204.795502 348.492188,212.109375 C347.500068,220.086646 345.527071,227.955124 343.058594,235.605469 C341.18874,241.400549 338.90053,247.17652 335.539063,252.253906 C310.365305,290.278036 248.236714,305.720555 238.273438,353.910156 C237.360965,358.323531 234.791621,364.732807 238.402344,367.429688 C256.382371,380.859128 306.905785,345.194599 316.015625,339.082031 C449.352887,249.614697 258.181648,369.66544 420.019531,274.886719 C454.871764,254.475861 487.467211,230.277246 523.84375,212.464844 C550.123666,199.596428 590.045293,191.47268 605.996094,163.714844 C607.829544,160.524244 601.111117,153.640154 587.894531,144.027344 C572.198958,132.611493 551.866435,125.665785 532.378906,130.371094 C523.305998,132.561768 514.592008,136.43634 506.535156,141.148438 C486.552797,152.835237 462.375115,171.115025 452.058594,193.269531 C446.192862,205.866063 448.418269,243.960729 448.496094,248.371094 C449.686384,315.825663 451.017361,288.377534 456.019531,362.800781 C459.504789,414.655116 459.645055,491.519762 459.9375,536.511719 C460.476378,619.41691 487.014546,615.528883 458.347656,619.222656", :stroke => "#979797"}
        %path#Path2{:d => "M519.011719,281.675781 C524.876181,330.523705 518.11289,279.317671 576,404.207031 C592.009688,438.747358 602.369549,475.996626 606.300781,513.597656 C606.899082,519.320224 606.932242,535.954865 609.109375,530.628906 C617.914248,509.089397 620.646034,485.537989 626.929688,463.132813 C629.725246,453.164886 632.28044,443.058598 636.339844,433.535156 C644.282103,414.902458 654.600685,397.357481 662.851563,378.859375 C666.754415,370.109349 668.841847,360.621321 672.761719,351.878906 C695.791912,300.515108 739.568104,260.178399 775.550781,218.65625 C846.928668,136.289859 718.912253,271.325465 856.617188,130.386719", :stroke => "#979797"}
              
            
!

CSS

              
                @font-face {
  font-family: 'Telefon';
  src: 
       url('https://assets.codepen.io/383755/telefon.woff2') format('woff2'); 
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:"Telefon";
  cursor:pointer;
  min-height: 100vh;
  background-color: #000;
  overflow:hidden;
  filter:brightness(2.75);
  #fullwrap{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:scale(0.75) translate(-50px, -20px);
  }
  img{
    position:absolute;
    opacity:0;
  }
  &.active{
    pointer-events:none;
    &:after{
      opacity:0;
      transition:0.25s ease-in-out;
      color:transparent;
    }
  }
  &.loaded{
    &:after{
      color:#fff;
      transition:opacity 1s ease-in-out, color 0.25s ease-in-out;
      transition-delay:0s, 2s;
    }
    &.active{
      &:after{
        color:#000;
        transition:opacity 0.75s ease-out, color 0.25s ease-in-out;
        transition-delay:0s, 0s,
      }
    }
  }
  &:after{
    content:'click to play';
    color:#000;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:9999;
    background:#000;
    transition:opacity 1s ease-in-out, color 0.25s ease-in-out;
    transition-delay:0s, 0s;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  #fullwrap:before, #fullwrap:after, .box{
    content:'';
    position:absolute;
    width:1000px;
    min-width:1000px;
    height:725px;
    border-radius:75px;
    box-shadow:0 0 20px 0 #000, inset 0 0 40px 30px #000, 0 0 0 1200vmin #000;
    z-index:996;
    transform-style:preserve-3d;
    transform:scale(0.7);
  }
  #fullwrap:after{
    box-shadow:0 0 0 20px #000, 0 0 2px 20.75px rgba(255,255,255,0.1);
    z-index:999;
    border-radius:5px;
  }
  .box{
    z-index:998;
    &:before, &:after{
      content:'';
      position:absolute;
      width:147.5%;
      height:135%;
      top:-12.5%;
      left:-10%;
      border-radius:20px;
      box-shadow:inset 0 -20px 40px rgba(0,0,0,0.25), inset 0 -20px 40px 5px rgba(0,0,0,0.055), inset 0 10px 90px 0px rgba(255,255,255,0.025);
    }
    .speaker, .dials{
      position: absolute;
      width: 22.5%;
      height: 55%;
      right: -30%;
      background: radial-gradient(circle at center, #000, #000 5px, transparent 5px) 50% 50% / 20px 20px, radial-gradient(circle at center, #222, #111 5px, rgba(255,255,255,0.025) 5px) calc(50% + 2px) 50% / 20px 20px;
      top: 0%;
      border-radius: 20px;
      box-shadow: inset 20px 20px 20px 0 #000, -2px -2px 20px #111;
    }
    .dials{
      top:auto;
      bottom:0;
      height:37.5%;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.35) 7.5%), -webkit-repeating-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.25) 4.5%), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.55) 2.2%), linear-gradient(180deg, #c7c7c7 0%, #e6e6e6 47%, #c7c7c7 53%, #222 100%);
      background-size:100px 100%;
      box-shadow: inset 20px -20px 20px 0 rgba(0,0,0,0.5), -2px 2px 20px #111;
      &:before, &:after{
        content:'';
        position:absolute;
        width:150px;
        height:150px;
        border-radius:100%;
        left:calc(50% - 75px);
        top:calc(50% - 75px);
        background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.35) 7.5%), -webkit-repeating-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.25) 4.5%), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.55) 2.2%), linear-gradient(-180deg, #c7c7c7 0%, #e6e6e6 47%, #c7c7c7 53%, #222 100%);
        background-size:100px 100%;
        box-shadow:inset 5px 0 5px 5px rgb(255 255 255 / 3%), 10px 2px 10px #000
      }
      &:after{
        z-index:9;
        border-radius:0;
        width:30px;
        left:calc(50% - 15px);
        background: linear-gradient(to right, transparent calc(50% - 2px), #000 calc(50% - 2px), #000 calc(50% + 2px), transparent calc(50% + 2px)) 50% 0px / 100% 25px no-repeat, linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)) 50% 50% / 100px 100%, -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.35) 7.5%) 50% 50% / 100px 100%, -webkit-repeating-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.25) 4.5%) 50% 50% / 100px 100%, -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.55) 2.2%) 50% 50% / 100px 100%, linear-gradient(-180deg, #c7c7c7 0%, #e6e6e6 47%, #c7c7c7 53%, #222 100%) 50% 50% / 100px 100%;
      }
    }
  }
}

.wrap{
  width:1100px;
  min-width:1100px;
  height:725px;
  transform:scale(0.5);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  perspective:300px;
  position:relative;
  &.active{
    .inner:after{
      opacity:0;
    }
    .inner{
      &:first-of-type{
        &:after{
          transition:opacity 1s ease-in-out, transform 0.3s ease-in-out, background 0.3s ease-in-out;
          background:#000;
          transition-delay:0.25s, 0s, 0s;
        }
        &:after, svg{
          transform:scaleY(1);
        }
      }
    }
  }
  .inner{
    position:absolute;
    width:100%;
    height:100%;    
    overflow:hidden;
    border-radius:150px;
    z-index:10;
    background:#000;
    &.static{
      background:url('https://i.gifer.com/origin/8a/8ad7bd58e7556d95afa5528eb43113a9_w200.gif');
    }
    &:after{
      content:'';
      position:absolute;
      width:100%;
      height:100%;
      left:0;
      top:0;
      z-index:998;
      transform:scaleY(1);
      transition:opacity 0.6s ease-in-out;
      opacity:1;
    }
    &:first-of-type{
      transform:translateZ(40px);
      svg{
        transform:scaleY(0);
        transition:transform 0.2s ease-in-out;
      }
      &:after{
        background:#fff;
        transform:scaleY(0);
        transition:opacity 0.5s ease-in-out, transform 0.3s ease-in-out, background 0.3s ease-in-out;
      }
      &:before{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background:radial-gradient(ellipse at bottom, transparent 40%, rgba(255,255,255,0.75)) 50% -400px / 3200px 1200px no-repeat, radial-gradient(ellipse at top, transparent 20%, #000 50%) 50% 250px / 4300px 1200px no-repeat;
        z-index:999;
        box-shadow:inset 0 0 40px 2px #000;
      }
    }
    @for $i from 2 through 5{
      &:nth-of-type(#{$i}){
        z-index:0;
        &:before{
          content:'';
          position:absolute;
          width:100%;
          height:100%;
          border-radius:inherit;
          left:0;
          top:0;
          box-shadow:inset 0 0 30px 1px #000;
          z-index:999;
        }
      }
    }
    &:nth-of-type(2){
      top:100%;
      mask:linear-gradient(to bottom, rgba(255,255,255,0) 40px, rgba(255,255,255,0.5) 75px);
      transform-origin:top;
      transform:rotateX(90deg);
    }
    &:nth-of-type(3){
      top:-100%;
      mask:linear-gradient(to top, rgba(255,255,255,0) 40px, #fff 175px);
      transform-origin:bottom;
      transform:rotateX(-90deg);
    }
    &:nth-of-type(4){
      left:-100%;
      mask:linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.05) 40px, #fff 75px);
      transform-origin:right;
      transform:rotateY(90deg) scaleY(1);
    }
    &:nth-of-type(5){
      left:100%;
      mask:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.05) 40px, #fff 75px);
      transform-origin:left;
      transform:rotateY(-90deg) scaleY(1);
    }
  }
}

svg {
  width: 1200px;
  height: 824px;
  position:absolute;
  left:-50px;
  top:-60px;
  .maskimg{
    
  }
}


svg#ontv{
  width:120px;
  height:auto;
  z-index:999;
  mix-blend-mode:hard-light;
  left:calc(50% + 12.5px);
  top:calc(50% + 85px);
  opacity:0.65;
  transform:translate(-50%, -50%) scaleY(1);
  transition:opacity 0.2s ease-in-out;
  transition-delay:2s;
  path{
    stroke-width:60px;
    stroke-linecap:round;
    stroke:#fff;
    stroke-dasharray:2500px;
    stroke-dashoffset:2500px;
    transition:stroke-dashoffset 0.3s ease-in-out;
    &#Path2{
      stroke-dasharray:1000px;
      stroke-dashoffset:1000px;
      transition:stroke-dashoffset 0.2s ease-in-out;
    }
  }
}

body{
  .wrap.active ~ svg#ontv{
    opacity:0;
    transition-delay:9.25s;
    mask{
      path#Path1, path#Path2{
        stroke-dashoffset:0px !important;
        transition:stroke-dashoffset 0.65s ease-in-out;
        transition-delay:3.5s;
      }
      path#Path2{
        transition:stroke-dashoffset 0.25s ease-in-out;
        transition-delay:4s;
      }
    }
  }
}

              
            
!

JS

              
                $(window).on("load", function() {
  setTimeout(() => { play(); }, 2000);
  $('body').addClass('loaded');
});

$('body').click(function(){
  play();
})

function play(){
$('.maskimg').attr('xlink:href', 'https://assets.codepen.io/383755/codepenradiogif.gif');
  $(".wrap, body").addClass('active');
  setTimeout(() => { 
  $('.maskimg').attr('xlink:href', 'https://assets.codepen.io/383755/black.png');
  $('.wrap, body').removeClass('active');
  }, 10500);
}
              
            
!
999px

Console