<div class="clearfix">
        <div class="svg-text svg-text-s">
            <svg version="1.1" id="large-s-wrap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            	 viewBox="0 0 944 841.9" enable-background="new 0 0 944 841.9" xml:space="preserve">
              <g>
                <path id="large-s" fill="none" stroke="#ED1165" stroke-width="10" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M291.2,536.2l0.7-1.1c12.7-18,37.4-22.9,55.8-10.6
                  c26.5,17.8,60.2,30.3,99.5,30.3c48.4,0,71.1-21.4,71.1-45.3c0-71.1-235.2-21.4-235.2-175.2c0-68,58.8-124.4,155-124.4
                  c46.8,0,87.9,10.2,122.4,29.9c21.3,12.2,27.1,40.1,12.5,59.8v0c-12.4,16.6-35.2,21.2-53.2,10.9c-27.7-15.9-59.3-23.3-89.7-23.3
                  c-36.8,0-57.6,15.9-57.6,40.4c0,64.3,234.6,20.8,234.6,173.4c0,74.7-53.9,131.1-163.6,131.1c-59.3,0-105.9-14.8-141.7-38.6
                  C282.8,580.8,278.1,554.9,291.2,536.2z"/>
              </g>
            </svg>

            <svg version="1.1" id="med-s-wrap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            	 viewBox="0 0 944 841.9" enable-background="new 0 0 944 841.9" xml:space="preserve">
            <g>
            	<path id="medium-s" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M291.2,536.2l0.7-1.1c12.7-18,37.4-22.9,55.8-10.6
            		c26.5,17.8,60.2,30.3,99.5,30.3c48.4,0,71.1-21.4,71.1-45.3c0-71.1-235.2-21.4-235.2-175.2c0-68,58.8-124.4,155-124.4
            		c46.8,0,87.9,10.2,122.4,29.9c21.3,12.2,27.1,40.1,12.5,59.8v0c-12.4,16.6-35.2,21.2-53.2,10.9c-27.7-15.9-59.3-23.3-89.7-23.3
            		c-36.8,0-57.6,15.9-57.6,40.4c0,64.3,234.6,20.8,234.6,173.4c0,74.7-53.9,131.1-163.6,131.1c-59.3,0-105.9-14.8-141.7-38.6
            		C282.8,580.8,278.1,554.9,291.2,536.2z"/>
            </g>
            </svg>

            <svg version="1.1" id="small-s-wrap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            	 viewBox="0 0 944 841.9" enable-background="new 0 0 944 841.9" xml:space="preserve">
            <g>
            	<path id="small-s" fill="none" stroke="#C6C6C6" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M291.2,536.2l0.7-1.1c12.7-18,37.4-22.9,55.8-10.6
            		c26.5,17.8,60.2,30.3,99.5,30.3c48.4,0,71.1-21.4,71.1-45.3c0-71.1-235.2-21.4-235.2-175.2c0-68,58.8-124.4,155-124.4
            		c46.8,0,87.9,10.2,122.4,29.9c21.3,12.2,27.1,40.1,12.5,59.8v0c-12.4,16.6-35.2,21.2-53.2,10.9c-27.7-15.9-59.3-23.3-89.7-23.3
            		c-36.8,0-57.6,15.9-57.6,40.4c0,64.3,234.6,20.8,234.6,173.4c0,74.7-53.9,131.1-163.6,131.1c-59.3,0-105.9-14.8-141.7-38.6
            		C282.8,580.8,278.1,554.9,291.2,536.2z"/>
            </g>
            </svg>
        </div>

        <div class="svg-text svg-text-i">
            <svg version="1.1" id="large-i-wrap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            	 viewBox="0 0 944 841.9" enable-background="new 0 0 944 841.9" xml:space="preserve">
            <g>
            	<path id="large-i-top" fill="none" stroke="#ED1165" stroke-width="10" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M419.2,248.6c0-31.9,32-55.3,64.5-42.3
            		c13.1,5.3,23.1,16.6,26.5,30.3c7.7,30.9-15.5,58.5-45.1,58.5C440.1,295.2,419.2,274.3,419.2,248.6z"/>
            	<path id="large-i-bottom" fill="none" stroke="#ED1165" stroke-width="10" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M503,578c0,21.5-17.4,38.9-38.9,38.9h-0.2
            		c-21.5,0-38.9-17.4-38.9-38.9V359.8c0-21.5,17.4-38.9,38.9-38.9h0.2c21.5,0,38.9,17.4,38.9,38.9V578z"/>
            </g>
            </svg>

            <svg version="1.1" id="medium-i-wrap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            	 viewBox="0 0 944 841.9" enable-background="new 0 0 944 841.9" xml:space="preserve">
            <g>
            	<path id="medium-i-top" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M419.2,248.6c0-31.9,32-55.3,64.5-42.3
            		c13.1,5.3,23.1,16.6,26.5,30.3c7.7,30.9-15.5,58.5-45.1,58.5C440.1,295.2,419.2,274.3,419.2,248.6z"/>
            	<path id="medium-i-bottom" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M502.5,578.5c0,21.5-17.4,38.9-38.9,38.9h-0.2
            		c-21.5,0-38.9-17.4-38.9-38.9V360.3c0-21.5,17.4-38.9,38.9-38.9h0.2c21.5,0,38.9,17.4,38.9,38.9V578.5z"/>
            </g>
            </svg>

            <svg version="1.1" id="small-i-wrap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            	 viewBox="0 0 944 841.9" enable-background="new 0 0 944 841.9" xml:space="preserve">
            <g>
            	<path id="small-i-top" fill="none" stroke="#C6C6C6" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M419.2,248.6c0-31.9,32-55.3,64.5-42.3
            		c13.1,5.3,23.1,16.6,26.5,30.3c7.7,30.9-15.5,58.5-45.1,58.5C440.1,295.2,419.2,274.3,419.2,248.6z"/>
            	<path id="small-i-bottom" fill="none" stroke="#C6C6C6" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="M502,579c0,21.5-17.4,38.9-38.9,38.9h-0.2
            		c-21.5,0-38.9-17.4-38.9-38.9V360.8c0-21.5,17.4-38.9,38.9-38.9h0.2c21.5,0,38.9,17.4,38.9,38.9V579z"/>
            </g>
            </svg>
        </div>
    </div>
@import 'nib';
.svg-text
    position relative
    width 80%
    float left

    &-i
        position absolute
        left 24%

    svg
        position absolute
        left 0
        top 0

    #large-s-wrap
        z-index 3

    #med-s-wrap
        left -40px
        top -40px
        z-index 2

    #small-s-wrap
        left -80px
        top -80px
        z-index 1

    #large-i-wrap
        z-index 3

    #medium-i-wrap
        left -40px
        top -40px
        z-index 2

    #small-i-wrap
        left -80px
        top -80px
        z-index 1


    #large-s
        animation stroke-large 12s linear infinite

    #medium-s
        animation stroke-large 16s linear infinite

    #small-s
        animation stroke-large 8s linear infinite

    #large-i-top
        animation stroke-i-top 4s linear infinite

    #medium-i-top
        animation stroke-i-top 8s linear infinite

    #small-i-top
        animation stroke-i-top 2s linear infinite

    #large-i-bottom
        animation stroke-i-bottom 8s linear infinite

    #medium-i-bottom
        animation stroke-i-bottom 12s linear infinite

    #small-i-bottom
        animation stroke-i-bottom 5s linear infinite


@keyframes stroke-large
    0%
        stroke-dasharray 367, 150
        stroke-dashoffset 0

    50%
        stroke-dasharray 167, 350

    100%
        stroke-dasharray 367, 150
        stroke-dashoffset 2070


@keyframes stroke-i-top
    0%
        stroke-dasharray 70, 28
        stroke-dashoffset 0

    50%
        stroke-dasharray 35, 63

    100%
        stroke-dasharray 70, 28
        stroke-dashoffset 295


@keyframes stroke-i-bottom
    0%
        stroke-dasharray 190, 38
        stroke-dashoffset 0

    50%
        stroke-dasharray 80, 148

    100%
        stroke-dasharray 190, 38
        stroke-dashoffset 685
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.