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

              
                <body class="loading">
    <svg class="hidden">
        <!-- All deco shapes -->
        <defs>
            <path id="deco2"
                d="M 119.8,69.41 C 213.5,18.01 367.2,-1.306 440.4,76.58 482.9,121.9 435.3,200.8 432.9,262.9 431.1,310.6 461.3,372.1 427.7,406 342.4,492 158.3,499.3 64.62,422.5 10.09,377.8 18.76,282.6 32.51,213.5 43.46,158.4 70.61,96.36 119.8,69.41 Z" />
        </defs>
    </svg>
    <main>
        <div class="content content--grid">
            <div class="item item--style-2" data-animation-path-duration="1500"
                data-animation-path-easing="easeOutElastic"
                data-morph-path="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z"
                data-path-scaleY="1.1" data-image-scaleX="1.3" data-image-scaleY="1.3"
                data-animation-deco-duration="2000" data-animation-deco-delay="100" data-deco-rotate="-10">
                <svg class="item__svg" width="500px" height="500px" viewBox="0 0 500 500">
                    <clipPath id="clipShape2">
                        <path class="item__clippath"
                            d="M 378.1,121.2 C 408.4,150 417.2,197.9 411,245.8 404.8,293.7 383.5,341.7 353.4,370.7 303.2,419.1 198.7,427.7 144.5,383.8 86.18,336.5 67.13,221.3 111.9,161 138.6,125 188.9,99.62 240.7,90.92 292.4,82.24 345.6,90.32 378.1,121.2 Z" />
                    </clipPath>
                    <g class="item__deco">
                        <use xlink:href="#deco2" />                   </g>
                    <g clip-path="url(#clipShape2)">
                        <image class="item__img" xlink:href="img/Rectangle2.png" x="0" y="0" height="500px"
                            width="500px" />
                    </g>
                </svg>
                <div class="item__meta">
                    <div class="item__number">

                    </div>
                    <h2 class="item__title">Hey! </h2>
                    <p class="item__subtitle">That's my title
                </div>
            </div>



            <div class="item item--style-2" data-animation-path-duration="1500"
                data-animation-path-easing="easeOutElastic"
                data-morph-path="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z"
                data-path-scaleY="1.1" data-image-scaleX="1.3" data-image-scaleY="1.3"
                data-animation-deco-duration="2000" data-animation-deco-delay="100" data-deco-rotate="-10">
                <svg class="item__svg" width="500px" height="500px" viewBox="0 0 500 500">
                    <clipPath id="clipShape2">
                        <path class="item__clippath"
                            d="M 378.1,121.2 C 408.4,150 417.2,197.9 411,245.8 404.8,293.7 383.5,341.7 353.4,370.7 303.2,419.1 198.7,427.7 144.5,383.8 86.18,336.5 67.13,221.3 111.9,161 138.6,125 188.9,99.62 240.7,90.92 292.4,82.24 345.6,90.32 378.1,121.2 Z" />
                    </clipPath>
                    <g class="item__deco">
                        <use xlink:href="#deco2" />
                    </g>
                    <g clip-path="url(#clipShape2)">
                        <image class="item__img" xlink:href="img/Rectangle2.png" x="0" y="0" height="500px"
                            width="500px" />
                    </g>
                </svg>
                <div class="item__meta">
                    <div class="item__number">

                    </div>
                    <h2 class="item__title">Hey! </h2>
                    <p class="item__subtitle">That's my title
                </div>
            </div>


              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
  *,
    *::after,
    *::before {
        box-sizing: border-box;
    }

    body {
        font-family: 'Rubik', sans-serif;
        color: #131314;
        background: #efeff2 url(../img/bg.png) repeat-y 50% 500px;
        background-size: 70%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    a {
        text-decoration: none;
        color: #a6a9ac;
        outline: none;
    }

    a:hover,
    a:focus {
        color: #131314;
    }

    .hidden {
        position: absolute;
        overflow: hidden;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .js .loading::before {
        content: '';
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #efeff2;
    }

    .js .loading::after {
        content: '';
        position: fixed;
        z-index: 1001;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        pointer-events: none;
        border-radius: 50%;
        background: #dcdcde;
        animation: loaderAnim 0.8s ease-out infinite alternate forwards;
    }

    @keyframes loaderAnim {
        to {
            transform: scale3d(0.5, 0.5, 1);
        }
    }

    /* Icons */
    .icon {
        display: block;
        width: 1.5em;
        height: 1.5em;
        margin: 0 auto;
        fill: currentColor;
    }

    main {
        overflow: hidden;
    }

    .github {
        position: absolute;
        top: 0;
        right: 0;
        width: 6em;
        height: 6em;
    }

    .github__deco {
        position: absolute;
        z-index: -1;
        fill: #e6e6e6;
    }

    .icon--github {
        font-size: 1.15em;
        margin: 1em 0 0 2.5em;
    }

    /* Content */
    .content {
        padding: 3em 0;
    }

    .content--grid {
        display: grid;
        padding: 10vh 8vw;

        grid-template-columns: 50% 50%;
    }

    .content--related {
        font-size: 0.85em;
        display: grid;
        justify-content: center;
        align-content: center;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 2em;
        padding: 10em 0;
        text-align: center;
        letter-spacing: 0.05em;

        grid-template-columns: repeat(auto-fill, 260px);
        grid-gap: 4em;
    }

    .content--related>p {
        grid-column: 1 / -1;
    }

    /* Header */
    .codrops-header {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        padding: 5vw;
    }

    .codrops-header__title {
        font-size: 1.625em;
        font-weight: 500;
        line-height: 1.5;
        margin: 0;
        padding: 0.5em 0;
        letter-spacing: 0.5em;
        text-transform: uppercase;
    }

    /* Top Navigation Style */
    .codrops-links {
        position: relative;
        display: flex;
        margin: 0 1em 0 0;
        text-align: center;
        white-space: nowrap;
    }

    .codrops-icon {
        display: inline-block;
        margin: 0.5em;
    }

    .codrops-icon:first-child {
        margin-left: 0;
    }

    /* Related post item */
    .media-item {
        display: block;
        transition: color 0.3s;
    }

    .media-item__img {
        max-width: 100%;
        opacity: 0.8;
        border-radius: 60px/100px;
        transition: opacity 0.3s;
    }

    .media-item:hover .media-item__img,
    .media-item:focus .media-item__img {
        opacity: 1;
    }

    .media-item__title {
        font-weight: normal;
        margin: 0;
        padding: 0.5em;
    }

    /* items */
    .item {
        position: relative;
        width: 500px;
        max-width: 100%;
        margin: 0 0 0 auto;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        grid-column: span 2;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .item:nth-of-type(even) {
        margin: 0 auto 0 0;
    }

    .item:first-of-type {
        grid-column: span 1;
    }

    .item__svg {
        position: relative;
        display: block;
        width: 80%;
        height: auto;
        min-height: 500px;
        margin: 0 auto;
    }

    .item__clippath,
    .item__deco,
    .item__img {
        transform-origin: 50% 50%;
    }

    .item__meta {
        position: absolute;
        top: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .item__number {
        position: absolute;
        top: 0;
        width: 100%;
        padding: 12.5% 0 0 3em;
        letter-spacing: 0.5em;
        text-transform: uppercase;
    }

    .item__specimen {
        font-size: 5em;
        font-weight: 500;
        line-height: 0.9;
        vertical-align: text-bottom;
        letter-spacing: -0.025em;
    }

    .item__reference {
        font-size: 1.25em;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    .item__title {
        font-size: 1.165em;
        font-weight: 600;
        width: 100%;
        margin: 1em 0 0 0;
        text-align: center;
        letter-spacing: 0.125em;
        color: #fff;
    }

    .item__subtitle {
        font-size: 1em;
        font-weight: 500;
        margin: 0.5em 0 0;
        text-align: center;
        letter-spacing: 0.15em;
        opacity: 0;
    }

    /* Individual styles */
    .item--style-1 .item__deco {
        fill: #dcdcde;
    }

    .item--style-2 .item__deco {
        fill: #404040;
    }

    .item--style-3 .item__deco {
        fill: #fff;
    }

    .item--style-3 .item__title {
        color: #131314;
    }

    .item--style-4 .item__deco {
        fill: #dcdcde;
    }

    .item--style-5 .item__deco {
        fill: #404040;
    }

    .item--style-6 .item__deco {
        fill: #dcdcde;
    }

    .item--style-7 .item__deco {
        fill: #fff;
    }

    .item--style-7 .item__title {
        color: #131314;
    }

    .item--style-8 .item__deco {
        fill: #404040;
    }

    .item--style-9 .item__deco {
        fill: #dcdcde;
    }

    @media screen and (max-width: 60em) {
        .item:first-of-type {
            grid-column: span 2;
        }

        .content--grid {
            grid-row-gap: 25vh;
        }
    }

    @media screen and (max-width: 40em) {
        .codrops-header__title {
            font-size: 1em;
        }

        .content--grid {
            padding: 2vh 8vw;
        }

        .item__number {
            font-size: 0.75em;
        }

        .item__svg {
            min-height: 360px;
        }
    }
              
            
!

JS

              
                {
    class ImgItem {
        constructor(el) {
            this.DOM = {};
            this.DOM.el = el;
            this.DOM.svg = this.DOM.el.querySelector('.item__svg');
            this.DOM.path = this.DOM.svg.querySelector('path');
            this.paths = {};
            this.paths.start = this.DOM.path.getAttribute('d');
            this.paths.end = this.DOM.el.dataset.morphPath;
            this.DOM.deco = this.DOM.svg.querySelector('.item__deco');
            this.DOM.image = this.DOM.svg.querySelector('image');
            this.DOM.title = this.DOM.el.querySelector('.item__meta > .item__title');
            this.DOM.subtitle = this.DOM.el.querySelector('.item__meta > .item__subtitle');
            this.CONFIG = {
                // Defaults:
                animation: {
                    path: {
                        duration: this.DOM.el.dataset.animationPathDuration || 1500,
                        delay: this.DOM.el.dataset.animationPathDelay || 0,
                        easing: this.DOM.el.dataset.animationPathEasing || 'easeOutElastic',
                        elasticity: this.DOM.el.dataset.pathElasticity || 400,
                        scaleX: this.DOM.el.dataset.pathScalex || 1,
                        scaleY: this.DOM.el.dataset.pathScaley || 1,
                        translateX: this.DOM.el.dataset.pathTranslatex || 0,
                        translateY: this.DOM.el.dataset.pathTranslatey || 0,
                        rotate: this.DOM.el.dataset.pathRotate || 0
                    },
                    image: {
                        duration: this.DOM.el.dataset.animationImageDuration || 2000,
                        delay: this.DOM.el.dataset.animationImageDelay || 0,
                        easing: this.DOM.el.dataset.animationImageEasing || 'easeOutElastic',
                        elasticity: this.DOM.el.dataset.imageElasticity || 400,
                        scaleX: this.DOM.el.dataset.imageScalex || 1.1,
                        scaleY: this.DOM.el.dataset.imageScaley || 1.1,
                        translateX: this.DOM.el.dataset.imageTranslatex || 0,
                        translateY: this.DOM.el.dataset.imageTranslatey || 0,
                        rotate: this.DOM.el.dataset.imageRotate || 0
                    },
                    deco: {
                        duration: this.DOM.el.dataset.animationDecoDuration || 2500,
                        delay: this.DOM.el.dataset.animationDecoDelay || 0,
                        easing: this.DOM.el.dataset.animationDecoEasing || 'easeOutQuad',
                        elasticity: this.DOM.el.dataset.decoElasticity || 400,
                        scaleX: this.DOM.el.dataset.decoScalex || 0.9,
                        scaleY: this.DOM.el.dataset.decoScaley || 0.9,
                        translateX: this.DOM.el.dataset.decoTranslatex || 0,
                        translateY: this.DOM.el.dataset.decoTranslatey || 0,
                        rotate: this.DOM.el.dataset.decoRotate || 0
                    }
                }
            };
            this.initEvents();
        }
        initEvents() {
            this.mouseenterFn = () => {
                this.mouseTimeout = setTimeout(() => {
                    this.isActive = true;
                    this.animate();
                }, 75);
            }
            this.mouseleaveFn = () => {
                clearTimeout(this.mouseTimeout);
                if (this.isActive) {
                    this.isActive = false;
                    this.animate();
                }
            }
            this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
            this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
            this.DOM.el.addEventListener('touchstart', this.mouseenterFn);
            this.DOM.el.addEventListener('touchend', this.mouseleaveFn);
        }
        getAnimeObj(targetStr) {
            const target = this.DOM[targetStr];
            let animeOpts = {
                targets: target,
                duration: this.CONFIG.animation[targetStr].duration,
                delay: this.CONFIG.animation[targetStr].delay,
                easing: this.CONFIG.animation[targetStr].easing,
                elasticity: this.CONFIG.animation[targetStr].elasticity,
                scaleX: this.isActive ? this.CONFIG.animation[targetStr].scaleX : 1,
                scaleY: this.isActive ? this.CONFIG.animation[targetStr].scaleY : 1,
                translateX: this.isActive ? this.CONFIG.animation[targetStr].translateX : 0,
                translateY: this.isActive ? this.CONFIG.animation[targetStr].translateY : 0,
                rotate: this.isActive ? this.CONFIG.animation[targetStr].rotate : 0
            };
            if (targetStr === 'path') {
                animeOpts.d = this.isActive ? this.paths.end : this.paths.start;
            }
            anime.remove(target);
            return animeOpts;
        }
        animate() {
            // Animate the path, the image and deco.
            anime(this.getAnimeObj('path'));
            anime(this.getAnimeObj('image'));
            anime(this.getAnimeObj('deco'));
            // Title and Subtitle animation
            anime.remove(this.DOM.title);
            anime({
                targets: this.DOM.title,
                easing: 'easeOutQuad',
                translateY: this.isActive ? [{
                        value: '-50%',
                        duration: 200
                    },
                    {
                        value: ['50%', '0%'],
                        duration: 200
                    }
                ] : [{
                        value: '50%',
                        duration: 200
                    },
                    {
                        value: ['-50%', '0%'],
                        duration: 200
                    }
                ],
                opacity: [{
                        value: 0,
                        duration: 200
                    },
                    {
                        value: 1,
                        duration: 200
                    }
                ]
            });
            anime.remove(this.DOM.subtitle);
            anime({
                targets: this.DOM.subtitle,
                easing: 'easeOutQuad',
                translateY: this.isActive ? {
                    value: ['50%', '0%'],
                    duration: 200,
                    delay: 250
                } : {
                    value: '0%',
                    duration: 1
                },
                opacity: this.isActive ? {
                    value: [0, 1],
                    duration: 200,
                    delay: 250
                } : {
                    value: 0,
                    duration: 1
                }
            });
        }
    }

    const items = Array.from(document.querySelectorAll('.item'));
    const init = (() => items.forEach(item => new ImgItem(item)))();
    setTimeout(() => document.body.classList.remove('loading'), 2000);
};


              
            
!
999px

Console