svg.logo(viewBox="0 0 1000 270" role="img" aria-labelledby="logo-title")
    title#logo-title MarketingTool.io

    path.logo__letter(d="M266.8,159.62l-0.07-38.66l-17.09,33.7h-3.22l-17.02-33.7v38.66h-5.09v-46.9h6.63l17.15,33.77l17.09-33.77h6.57v46.9H266.8z")
    path.logo__letter(d="M307.21,154.19c-2.81,3.82-7.3,5.7-12.93,5.7c-7.3,0-11.99-4.69-11.99-10.79c0-6.16,4.89-10.05,13.2-10.12h11.59v-2.08c0-5.16-3.22-8.24-9.45-8.24c-3.89,0-7.5,1.47-11.19,4.02l-2.21-3.82c4.56-3.02,8.38-4.76,14.41-4.76c8.71,0,13.53,4.62,13.6,12.19l0.07,23.32h-5.09V154.19z M307.14,147.43v-4.22h-10.99c-5.9,0-8.98,1.81-8.98,5.7c0,3.89,3.15,6.43,8.11,6.43C301.24,155.33,305.8,152.32,307.14,147.43z")
    path.logo__letter(d="M329.19,132.15c2.35-5.16,6.7-7.97,12.66-8.04v5.29c-7.44-0.13-12.06,4.49-12.66,11.46v18.76h-5.23v-35.31h5.23V132.15z")
    path.logo__letter(d="M354.45,149.5v10.12h-5.23v-49.71h5.23v32.5l18.16-18.09h6.16l-13.2,13.67l14.61,21.64h-6.23l-12.06-17.82L354.45,149.5z")
    path.logo__letter(d="M416.16,144.01h-28.81c0.94,6.9,5.96,11.26,12.8,11.26c4.35,0,8.17-1.54,10.92-4.42l2.88,3.08c-3.35,3.75-8.31,5.9-14.2,5.9c-10.38,0-17.55-7.3-17.55-17.82s7.24-17.82,17.49-17.82C411.06,124.11,416.69,132.02,416.16,144.01zM411.47,139.72c-0.33-6.77-4.89-11.06-11.79-11.06c-6.7,0-11.52,4.35-12.33,11.06H411.47z")
    path.logo__letter(d="M443.36,157.21c-2.48,1.68-5.16,2.61-7.97,2.68c-5.16,0-8.98-3.08-8.98-10.05v-20.17h-5.09v-4.22h5.09v-9.31h5.16v9.31l11.19-0.07v4.29h-11.19v19.23c0,4.29,1.67,5.9,4.69,5.9c1.81,0,3.69-0.6,5.63-1.81L443.36,157.21z")
    path.logo__letter(d="M457.23,114.19c0,2.08-1.47,3.62-3.42,3.62s-3.42-1.54-3.42-3.62c0-2.08,1.47-3.62,3.42-3.62S457.23,112.12,457.23,114.19z M451.27,159.62v-35.31h5.16v35.31H451.27z")
    path.logo__letter(d="M501.45,137.85v21.78h-5.23v-20.37c0-6.23-3.75-9.92-9.98-9.92c-6.97,0.07-11.26,4.62-11.86,11.32v18.96h-5.23v-35.31h5.23v7.77c2.48-5.36,7.24-7.91,13.67-7.97C496.49,124.11,501.45,129.34,501.45,137.85z")
    path.logo__letter(d="M543.86,155.94c0,10.32-7.04,16.82-17.75,16.82c-5.56-0.07-10.18-1.88-14.47-5.09l2.41-4.02c3.48,2.88,7.17,4.42,11.86,4.49c7.71,0,12.73-4.69,12.73-12.06v-5.36c-2.48,4.69-7.04,7.37-13,7.37c-9.51,0-16.08-7.04-16.08-17.08c0-9.85,6.5-16.82,15.95-16.88c6.03,0,10.59,2.68,13.13,7.37v-7.17h5.23V155.94z M538.64,141.2c0-7.37-5.03-12.53-12.06-12.53c-7.1,0-12.06,5.23-12.13,12.53c0.07,7.24,5.03,12.46,12.13,12.46C533.61,153.66,538.64,148.43,538.64,141.2z")
    path.logo__tool.logo__h(d="M592.55,113.7l-8.95,4.39h-6.74v41.47h-6.48v-41.47h-12.1v-8.78h25.32L592.55,113.7z")
    path.logo__tool.logo__mg(d="M620.95,155.08h-2.21l-0.75-0.76l-0.17,0.17c2.82-3.19,4.53-7.39,4.53-11.98c0-10.02-8.13-18.14-18.15-18.14c-10.02,0-18.15,8.13-18.15,18.15c0,10.02,8.13,18.14,18.15,18.14c4.59,0,8.79-1.71,11.98-4.53l-0.17,0.17l0.75,0.76v2.2l13.96,13.96l4.19-4.18L620.95,155.08z M604.2,155.08c-6.97,0-12.57-5.59-12.57-12.56c0-6.99,5.6-12.57,12.57-12.57c6.97,0,12.56,5.58,12.56,12.57C616.76,149.49,611.17,155.08,604.2,155.08z")
    path.logo__tool.logo__cog(d="M667.11,142.51c0-2.51,1.55-4.49,3.87-5.85c-0.42-1.4-0.98-2.75-1.66-4.01c-2.61,0.68-4.72-0.34-6.51-2.12c-1.77-1.77-2.32-3.89-1.64-6.51c-1.26-0.68-2.6-1.24-4.01-1.66c-1.36,2.33-3.82,3.87-6.34,3.87c-2.51,0-4.97-1.54-6.34-3.87c-1.41,0.42-2.75,0.98-4.01,1.66c0.68,2.61,0.14,4.72-1.64,6.51c-1.77,1.77-3.89,2.8-6.49,2.12c-0.69,1.26-1.25,2.6-1.67,4.01c2.33,1.36,3.88,3.35,3.88,5.85c0,2.51-1.55,4.97-3.88,6.34c0.42,1.41,0.98,2.75,1.66,4.01c2.61-0.68,4.72-0.14,6.49,1.64c1.78,1.77,2.32,3.89,1.64,6.51c1.27,0.68,2.6,1.24,4.01,1.66c1.36-2.33,3.83-3.87,6.34-3.87c2.51,0,4.97,1.54,6.34,3.87c1.41-0.42,2.75-0.98,4.01-1.66c-0.68-2.61-0.14-4.72,1.64-6.51c1.77-1.77,3.89-2.8,6.51-2.12c0.68-1.27,1.24-2.61,1.66-4.01C668.65,147,667.11,145.02,667.11,142.51z M650.83,154.83c-6.79,0-12.32-5.51-12.32-12.32c0-6.8,5.51-12.32,12.32-12.32c6.8,0,12.32,5.51,12.32,12.32C663.15,149.32,657.64,154.83,650.83,154.83z")
    path.logo__tool.logo__sd--1(d="M688.97,117.98l-1.77,4.52c-0.23,1.17-0.35,7.58-0.35,8.8v8.58h-4.47v-8.61	c0-1.23-0.12-7.64-0.36-8.82l-1.77-4.47c-0.08-0.4-0.07-0.83,0.02-1.24l3.49-9.45h1.7l3.5,9.45C689.05,117.14,689.05,117.57,688.97,117.98z")
    path.logo__tool.logo__sd--2(d="M689.39,138.06v21.5h-9.56v-21.5H689.39z")
    path.logo__rect(d="M777.78,118.45v31.97c0,5.05-4.09,9.14-9.14,9.14h-51.69c-5.05,0-9.14-4.09-9.14-9.14v-31.97c0-5.05,4.09-9.14,9.14-9.14h51.69C773.69,109.31,777.78,113.4,777.78,118.45z")
    path.logo__io(d="M722.68,142.95c-1.46,0-2.56,1.1-2.56,2.64c0,1.59,1.1,2.73,2.56,2.73c1.47,0,2.57-1.14,2.57-2.73C725.24,144.05,724.15,142.95,722.68,142.95z M732.89,117.27c-1.55,0-2.72,1.18-2.72,2.84c0,1.63,1.17,2.81,2.72,2.81s2.73-1.17,2.73-2.81C735.62,118.45,734.44,117.27,732.89,117.27z M751.41,126.14c-6.72,0-11.31,4.44-11.31,10.99c0,6.52,4.59,11,11.31,11c6.67,0,11.27-4.48,11.27-11C762.69,130.58,758.08,126.14,751.41,126.14z M751.41,144.21c-3.91,0-6.63-2.84-6.63-7.04c0-4.15,2.72-7.01,6.63-7.01c3.86,0,6.59,2.85,6.59,7.01C758.01,141.37,755.28,144.21,751.41,144.21zM730.58,126.31v21.65h4.64v-21.65H730.58z")
View Compiled
$bgi: 'https://static.pexels.com/photos/12598/96917deb7705adcee76b65caf8c652b1.jpg'
$bgc: rgba(black, .85)
$blue: #00AAFF

body
    display: flex
    justify-content: center
    align-items: center
    height: 100vh
    margin: 0
    background: linear-gradient($bgc, $bgc), url($bgi) center / cover

.logo
    width: 100%
    &__letter,
    &__rect
        fill: white
    &__tool
        fill: $blue
    &__io
        fill: #111
(function () {

    TweenMax.set('.logo path', {
        transformOrigin: 'center'
    })

    TweenMax.set('.logo__letter', {
        scale: 0,
        opacity: 0
    })

    TweenMax.set('.logo__letter:nth-of-type(1)', { x: -90 })
    TweenMax.set('.logo__letter:nth-of-type(2)', { x: -80 })
    TweenMax.set('.logo__letter:nth-of-type(3)', { x: -70 })
    TweenMax.set('.logo__letter:nth-of-type(4)', { x: -60 })
    TweenMax.set('.logo__letter:nth-of-type(5)', { x: -50 })
    TweenMax.set('.logo__letter:nth-of-type(6)', { x: -40 })
    TweenMax.set('.logo__letter:nth-of-type(7)', { x: -30 })
    TweenMax.set('.logo__letter:nth-of-type(8)', { x: -20 })
    TweenMax.set('.logo__letter:nth-of-type(9)', { x: -10 })

    TweenMax.set('.logo__tool', {
        opacity: 0
    })

    TweenMax.set('.logo__mg', {
        x: -520,
        scale: 0,
        opacity: 0
    })

    TweenMax.set('.logo__h', {
        x: -500,
        y: 20,
        scale: 0,
        opacity: 0,
        rotationY: 180,
        rotation: -30
    })

    TweenMax.set('.logo__cog', {
        scale: .5
    })

    TweenMax.set('.logo__sd--1, .logo__sd--2', {
        y: 30
    })

    TweenMax.set('.logo__rect, .logo__io', {
        scale: 0
    })

    TweenMax.to('.logo__sd--1', 1, {
        rotationY: 180,
        repeat: -1,
        ease: Power2.easeOut
    })

    TweenMax.to('.logo__cog', 15, {
        rotation: 360,
        repeat: -1,
        ease: Power0.easeNone
    })


    const tl = new TimelineMax({ repeat: -1 })

    tl.staggerTo('.logo__letter', .7, {
        scale: .5,
        opacity: .5,
        ease: Back.easeOut.config(3)
    }, .1)

    tl.to('.logo__mg', 1, {
        scale: 1,
        opacity: 1,
        ease: Back.easeOut.config(3)
    }, '-=0.5')

    tl.to('.logo__mg', 1.9, {
        x: 0,
        ease: Power4.easeOut
    })

    tl.staggerTo('.logo__letter', .7, {
        scale: 1,
        opacity: 1,
        ease: Power4.easeOut
    }, .06, '-=1.9')

    tl.to('.logo__h', 1, {
        scale: 1,
        opacity: 1,
        ease: Back.easeOut.config(3)
    }, '-=1')

    tl.to('.logo__h', 1, {
        x: '+=42',
        rotation: 0,
        ease: Back.easeIn.config(4)
    })

    tl.staggerTo('.logo__letter', .7, {
        x: 0,
        ease: Back.easeOut.config(3)
    }, .06)

    tl.to('.logo__h', .5, {
        y: 0
    }, '-=.4')

    tl.to('.logo__h', .5, {
        rotationY: 0
    }, '-=.3')

    tl.to('.logo__h', 1.9, {
        x: 0,
        ease: Power4.easeOut
    })

    tl.to('.logo__cog', .6, {
        opacity: 1,
        scale: 1
    }, '-=1')

    tl.to('.logo__sd--1, .logo__sd--2', .6, {
        y: 0,
        opacity: 1
    }, '-=0.3')

    tl.to('.logo__rect', 1.3, {
        scaleX: 1,
        ease: Elastic.easeOut
    }, '-=0.2')

    tl.to('.logo__rect', 1.3, {
        scaleY: 1,
        ease: Elastic.easeOut
    }, '-=1.2')

    tl.to('.logo__io', 1.3, {
        scaleX: 1,
        ease: Elastic.easeOut
    }, '-=1')

    tl.to('.logo__io', 1.3, {
        scaleY: 1,
        ease: Elastic.easeOut
    }, '-=1.2')

    tl.to('.logo__io', 5, { x: 0 })

    tl.staggerTo('.logo path', .7, {
        scale: .5,
        opacity: 0,
        ease: Power4.easeOut,
        onComplete() {
            tl.timeScale(1)
        }
    }, .06)

    tl.timeScale(2.6)

})()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js