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

              
                <div class="relative w-max">
  <svg class="relative z-20" width="433" height="434" viewBox="0 0 433 434" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="216.525" y="2" width="1.89844" height="430" fill="#1F1E1D"/>
<rect x="2" y="216.525" width="430" height="1.89847" fill="#1F1E1D"/>
<path d="M216.925 432C335.648 432 431.891 335.741 431.891 217C431.891 98.2588 335.648 2 216.925 2C98.2028 2 1.95923 98.2588 1.95923 217C1.95923 335.741 98.2028 432 216.925 432Z" stroke="#1F1E1D" stroke-width="2.02564" stroke-dasharray="8.42 8.42"/>
<path d="M217.186 396.723C316.32 396.723 396.683 316.347 396.683 217.198C396.683 118.049 316.32 37.6729 217.186 37.6729C118.053 37.6729 37.6898 118.049 37.6898 217.198C37.6898 316.347 118.053 396.723 217.186 396.723Z" stroke="#1F1E1D" stroke-width="2.02564" stroke-dasharray="8.42 8.42"/>
<path d="M217.187 367.698C298.511 367.698 364.438 300.317 364.438 217.198C364.438 134.079 298.511 66.6978 217.187 66.6978C135.862 66.6978 69.9348 134.079 69.9348 217.198C69.9348 300.317 135.862 367.698 217.187 367.698Z" stroke="#1F1E1D" stroke-width="2.02564" stroke-dasharray="8.42 8.42"/>
<path d="M217.187 332.223C280.703 332.223 332.193 280.724 332.193 217.198C332.193 153.671 280.703 102.173 217.187 102.173C153.67 102.173 102.18 153.671 102.18 217.198C102.18 280.724 153.67 332.223 217.187 332.223Z" stroke="#1F1E1D" stroke-width="2.02564" stroke-dasharray="8.42 8.42"/>
<path d="M217.186 299.973C262.895 299.973 299.948 262.913 299.948 217.198C299.948 171.482 262.895 134.423 217.186 134.423C171.478 134.423 134.425 171.482 134.425 217.198C134.425 262.913 171.478 299.973 217.186 299.973Z" stroke="#1F1E1D" stroke-width="2.02564" stroke-dasharray="8.42 8.42"/>
</svg>
<div class="polygon polygon-1 absolute top-0 z-10"></div>
<div class="polygon polygon-2 absolute top-0 z-10"></div>
  <img class="graph-image absolute w-17.5 top-1/2 left-1/2 z-30 transform -translate-x-1/2 -translate-y-1/2 md:w-unset" src="https://dev-pitney-bowes.pantheonsite.io/wp-content/uploads/2021/06/company-1.png" alt="Haim">
    <img class="graph-image absolute w-17.5 top-1/2 left-1/2 z-30 transform -translate-x-1/2 -translate-y-1/2 md:w-unset" src="https://dev-pitney-bowes.pantheonsite.io/wp-content/uploads/2021/06/adidas.png" alt="Adidas">
</div>

              
            
!

CSS

              
                .polygon-1{
  clip-path: polygon(50% 10%, 80% 50.5%, 50% 100%, 0 50%);
  background-color: red;
  width: 100%;
  height: 100%;
  z-index: 0
}

.polygon-2{
  clip-path: polygon(50% 20%, 90% 50.5%, 50% 100%, 10% 50%);
  background-color: yellow;
  width: 100%;
  height: 100%;
  z-index: 0
}
              
            
!

JS

              
                gsap.registerPlugin(CustomEase)

CustomEase.create('customEase', '0.25,0.1,0.25,1')

class Radar{
    constructor() {
        this.polygons = gsap.utils.toArray(".polygon")
        this.images = gsap.utils.toArray(".graph-image")
        this.masterTimline =  gsap.timeline();
    }

    init(){
        this.polygonAnimation()

        this.masterTimline
            .add(this.polygonAnimation())
            .add(this.imagesAnimation(), '<')
    }

    polygonAnimation(){
        let timeline = gsap.timeline({
            repeat: -1,
            ease: 'customEase'
        })

        gsap.set(this.polygons, {scale: 0})
        gsap.set(this.images, {scale: 0})

        this.polygons.forEach(polygon => {
            timeline
                .to(polygon, {scale: 1, duration: 1})
                .to(polygon, {scale: 0, duration: 1, delay: 2})
        });

        return timeline
    }

    imagesAnimation(){
        let timeline = gsap.timeline({
                repeat: -1,
                ease: 'customEase'
            });

        gsap.set(this.images, {scale: 0})

        this.images.forEach(image => {
            timeline
                .to(image, {scale: 1, duration:1, delay: 1})
                .to(image, {scale: 0, delay: 1})
        });

        return timeline
    }


}

export default Radar

let main = () => {
    let radar = new Radar()
    radar.init()
}

$(document).ready(main)
              
            
!
999px

Console