Animated SVG Pipes Impact

We lately launched Pleased Apps. In contemplating the design of the Happy Apps website, we aimed to have one thing uniquely eye-catching, enjoyable and kooky — we’re presupposed to be “comfortable” in any case — but in addition critical sufficient that our customers really feel assured trusting us with their uptime monitoring.

One design aspect of the Joyful Apps website that has acquired many compliments (and questions) to date is what we name “The Pipes.”

The Pipes is a full-web page animation impact that we constructed utilizing SVG, CSS and JavaScript.

The SVG pipes is visually partaking sufficient that many individuals have needed to know the way it works. It is fairly easy, and I figured I might share an summary of the way it works.

I’ve remoted and recreated elements of the SVG animation on CodePen on your comfort.

The HTML

We’ve three pipes which are coloured blue, yellow and purple. These pipes are SVG paths that we created in Illustrator. When remoted from the web page, the SVG paths seem like this:

There is a div factor (which has a category of visible-container) that incorporates the svg aspect for that specific part of the online web page. The div factor has a hard and fast peak and width.

The markup seems like this:

<div class="visible-container">
  <svg viewBox="zero zero 563 800" class="stroke-strains paralax on">
    <!-- Pipe #1 (blue) -->
    <path fill="none" stroke="#56AFD0" stroke-width="10" stroke-linejoin="bevel" stroke-miterlimit="10" d="M572,zero
c0,zero-zero.2,7.three,zero.2,thirteen.1C572.9,26.eight,580.5,50,622,50c59,zero,124,zero,124,0s50.5-four,50.5,53s0,ninety four,zero,94s-7.5,forty five.5-forty one.5,forty five.5s-fifty five,zero-fifty five,zero
s-36.5-three.5-36.5,37s0,195,zero,195S661.three,519,702,519c38,zero,36.5,fifty four,36.5,54v54.5c0,zero,2.eight,forty five-forty four.5,45c-forty three,zero-forty six.5,zero-forty six.5,zero
S610.7,668,611,730c0.four,sixty six.four,zero.9,70,zero.9,70" />
    <!-- Pipe #2 (yellow) -->
    <path fill="none" stroke="#F5EC87" stroke-width="10" stroke-miterlimit="10" d="M527.5,0l0,42c0,zero-three,forty one.5,forty two,forty one.5s112.5,zero,112.5,zero
s65-three.5,sixty five,fifty eight.5s0,fifty seven,zero,57v13.5c0,zero-three.three,32.2,forty five.5,32c53.5-zero.2,232,zero,232,0s55.5-eight,fifty five.5,46s0,171,zero,171s7.three,fifty six.2-forty five.5,fifty six
c-forty six-zero.1-296,zero-296,0s-fifty seven.eight-7.5-fifty six.5,53c1.four,sixty five,zero,102,zero,102s4,fifty one-fifty four.5,51s-fifty one,seventy six.5-fifty one,seventy six.5" />
    <!-- Pipe #three (purple) -->
    <path fill="none" stroke="#B685C5" stroke-width="10" stroke-miterlimit="10" d="M550,0v90c0,zero-three.three,forty one.four,fifty two.5,forty one
c51-zero.four,143.eight,zero,143.eight,0s53.2-5,fifty three.2,41s-6,sixty eight,39,68s183.5,zero,183.5,0s55-four.three,fifty five,50c0,fifty six,zero,one hundred seventy five,zero,175s0,forty three-sixty one,43c-fifty four,zero-265,zero-265,zero
s-forty seven.7-four.7-forty seven,fifty two.5c0.7,sixty one,zero,one hundred and five,zero,105s7.three,forty five-sixty six,45c-seventy seven.5,zero-forty five.5,zero-forty five.5,0s-forty two.5-6-forty two.5,forty.5s0,forty nine,zero,forty nine" />
  </svg>
</div>

The SVG

The svg component is the centerpiece of the entire thing, so let’s speak a bit bit about it. It is fairly simple.

The svg factor is inline, in

The post Animated SVG Pipes Impact appeared first on DICKLEUNG DESIGN 2014.