Skip to content

Instantly share code, notes, and snippets.

@johnslipper

johnslipper/Relish-Animated-SVG-Sequence-(CSS-&-Velocity-JS).markdown

Created January 13, 2015 05:02
Show Gist options
  • Save johnslipper/6b5295da9c536bc90323 to your computer and use it in GitHub Desktop.
Save johnslipper/6b5295da9c536bc90323 to your computer and use it in GitHub Desktop.
Download ZIP
Relish Animated SVG Sequence
Raw
index.html
<!-- ANIMATED INTRO -->
<section class="section intro js-intro">
<div class="content">
<h1 class="logo">
<svg class="svg relish" alt="Relish" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 133 960 292" enable-background="new 0 133 960 292" xml:space="preserve">
<path id="Tittle" fill="#FFFFFF" d="M612,207.4c-15.6,0-25.5-9.3-25.8-24c0-18.3,11.7-30.9,30-30.9c15.6,0,26.1,10.2,26.1,25.5
C642.3,194.8,629.4,207.4,612,207.4z"/>
<circle id="Tittle_Mask" fill="#DC0031" cx="614.2" cy="180" r="36.8"/>
<path id="H" fill="#FFFFFF" d="M901.8,240.4c24.9,9.9,24.6,29.7,19.2,47.1c-4.8,16.2-12.6,31.2-19.2,47.1
c-2.1,5.4-4.2,10.8-5.7,16.5c-1.8,7.2,2.4,11.1,9.6,10.2c12.3-2.1,20.1-10.2,27.6-18.9c3-3.6,5.4-7.5,7.8-11.4
c4.2-6.9,8.7-7.2,13.5-0.9c4.8,6.6,6,14.1,4.5,21.9c-3,15-12.6,25.8-24.3,34.8c-16.8,13.2-35.7,20.7-57.6,18.9
c-26.4-2.1-39.3-20.1-30.9-45.6c5.7-17.7,13.8-34.5,20.7-51.6c2.1-5.1,4.5-10.2,6-15.6c2.1-8.1-0.9-11.1-9-8.7
c-10.2,3-17.4,9.9-23.4,18c-19.2,24.9-30,53.7-35.7,84.6c-0.9,4.2-1.2,11.1-3.3,12c-6,2.1-13.2,2.7-19.5,1.5
c-10.2-2.1-17.1-12-16.2-24c1.5-18.6,3.3-37.5,6.9-56.1c7.8-39.6,20.1-77.7,40.5-112.8c8.7-14.7,18.9-28.2,32.7-38.7
c13.5-9.9,28.5-14.7,45.3-11.1c18.9,3.9,28.2,15.9,27.9,35.1C918.9,209.8,912.6,226,901.8,240.4z M830.1,264.4
c14.1-11.1,27.9-22.8,36.6-38.7c3-5.1,4.5-11.1,6-16.8c0.6-2.1-0.9-4.8-1.5-6.9c-2.4,0.9-5.7,0.9-7.2,2.4
C847.8,221.5,838.8,242.8,830.1,264.4z"/>
<path id="H_Mask" fill="none" stroke="#DC0031" stroke-width="56" stroke-linecap="round" stroke-miterlimit="10" d="
M943.3,350.7c-17,18-51.3,45.3-70.3,28.3s50.7-112.8,23.7-113S817,318,817,318c40-28,108.7-139.8,65-150c-70-2.3-97,219-97,219"/>
<path id="S" fill="#FFFFFF" d="M754.8,243.7c-26.4-16.8-54.3-15.3-81.3-2.4c-27.6,13.2-30.6,41.4-20.4,63.6
c4.8,10.5,13.8,17.1,23.7,22.8c6.9,3.9,13.8,7.8,20.1,12.6c9.3,7.2,9.9,18.9,2.1,26.1c-12.9,12.3-38.4,5.4-42.9-11.7
c-1.2-4.5,0.3-9.6-0.9-13.8c-1.5-5.1-4.2-9.9-7.5-13.5c-3.3-3.3-7.5-3.9-9.9,2.1c-1.2,3.3-3.3,6.3-5.4,9
c-7.2,9.6-14.1,19.2-26.7,22.5c-8.4,2.1-12.6-1.2-10.8-9.6c0.5-2.4,3.1-11.2,3.7-13.6c-4.5,6.6-16.5,16.4-28.8,25.5
c-9.5,7-18.4,14.7-25.3,18.7c1.3,2.6,2.8,9.5,5,12.3c8.4,10.8,20.7,12.6,33.3,12.3c18-0.3,33.6-7.2,48-17.7
c7.5,9,17.1,14.4,28.2,17.1c18,4.2,35.7,3,52.8-3.3s31.5-16.8,38.7-34.2c9.9-23.7,6.6-49.2-21.9-61.8c-6-2.7-12-5.1-17.7-8.1
c-4.5-2.4-9-5.4-12.3-9c-5.7-6.6-4.8-17.4,2.1-21.6c7.5-4.5,15.6-3.6,23.4,0c6.9,3.3,10.2,9.3,9.9,17.1c-0.3,4.8-1.5,9.9-2.1,15.3
c4.5,0,9.9,0.9,14.7,0c10.5-1.8,18.6-7.2,21.9-18C772.8,268,767.7,251.8,754.8,243.7z"/>
<path id="S_Mask" fill="none" stroke="#DC0031" stroke-width="54" stroke-linecap="round" stroke-miterlimit="10" d="
M750.6,281.2l-0.9-7.3c-10.3-29.7-80.5-24.4-77.5,7.8S715,325,715,325c24.9,14,22.8,48.7-17.5,61.1c-71.5,22.1-52.4-40.6-55.2-38.9
c-17.3,27.5-37.9,43.6-56.1,42.1c-28.2-2.4-15-22.7-15-22.7"/>
<path id="LI" fill="#FFFFFF" d="M597.8,340.4c1.4-4.4,2.9-8.7,4.6-13c7.2-19.5,15.9-38.1,16.8-59.4c0.9-18.6-9-30-27.3-30.6
c-5.4,0-10.5,1.8-15.9,2.4c-3.6,0.6-4.8,2.7-4.8,6.3c-0.6,27.6-9,53.4-17.7,79.2c-0.6,1.5-1.2,3-2.4,4.2
c-18.6,19.8-40.8,33.6-68.7,36c-12.5,1.2-18.5-5.6-19.9-17.5c-0.7,0.4-23.7,11.6-40.9,27.8c7.8,15.6,21.9,27,39.5,29.1
c15,1.8,29.4,0.3,43.5-4.2c13.3-4.1,23.1-7,38.6-15.4C560.6,374,586.4,359.5,597.8,340.4z"/>
<path id="LI_Mask" fill="none" stroke="#DC0031" stroke-width="56" stroke-linecap="round" stroke-miterlimit="10" d="M592,254.4
c0,132.6-106.7,135-136.5,121.6"/>
<path id="EL" fill="#FFFFFF" d="M463.2,349.7L463.2,349.7c31.2-14.2,60.3-43.9,76.8-69.4c15-23.4,24.6-48.6,24-76.8
c-0.6-25.2-15.6-39-40.8-38.7c-22.2,0.3-38.7,11.4-52.5,27c-34.2,39-50.1,85.5-54.9,136.2c-0.6,7.8-3,12.3-9,16.5
c-18.6,12.6-38.4,21.9-61.5,21.3c-6.3,0-13.2-3.9-15.7-9.7c-8,1.8-22.7,8-35.3,26.8c15.8,20.3,39.3,24.8,62.7,21.8
c24.3-3,45.9-12.3,65.7-27.6C435.2,364.8,459.6,351.6,463.2,349.7z M499.2,222.4c2.7-4.2,6.6-7.8,10.8-10.5
c5.4-3.3,10.2-0.9,9.3,5.7c-1.5,10.2-3,20.7-6.9,30.3c-8.7,21.6-21.9,39.9-40.5,54c-1.5,1.2-3,2.1-6,3.9
C473.7,275.5,482.1,247.3,499.2,222.4z"/>
<path id="EL_Mask" fill="none" stroke="#DC0031" stroke-width="56" stroke-linecap="round" stroke-miterlimit="10" d="
M438.7,328.3c0-38.3,52.2-163.4,95.2-138.8c43.8,89-127.6,186.5-145.9,191.8c-54.6,15.8-75.2-9.2-75.2-9.2"/>
<path id="RE" fill="#FFFFFF" d="M322.7,360.1c3.1-1.3,5.9-2.2,8.2-2.7l0,0c9.6-3.3,18.9-6,27.6-10.2c27.9-12.9,50.1-30.9,56.1-63.6
c4.8-25.2-7.2-44.1-30.6-47.7c-18.3-2.7-35.7,0-51.3,10.8c-30.9,21.3-45.3,52.5-48,88.8c-0.6,10.8-5.1,16.8-12.9,21.9
c-4.2,2.7-8.7,4.8-13.2,6.3c-14.4,4.2-28.2-0.6-35.4-12.3c-7.2-12-8.7-25.2-6.9-39.6c2.1-0.3,3.6-0.6,4.8-0.9
c32.1-4.8,56.1-20.4,69.6-50.4c15.3-33.9,4.2-72.9-26.7-91.5c-15.6-9.3-33-14.1-51-14.4c-19.5-0.3-39.6,0.6-59.1,2.7
c-26.7,3-51.6,11.7-73.5,27.6c-19.8,14.7-32.1,33.6-32.7,58.8c-0.3,9.6,3,18,12.3,22.5c9.9,4.5,19.8,3.9,29.4-0.9
c-9.6-24,13.7-52.2,35.7-60.2c0,0,22.5-8.5,36.3-9.1c17.4-0.8,34.5-1.5,51.6,0.3c14.1,1.5,26.4,8.4,31.2,24
c6.9,23.1-6.9,46.8-32.1,51.9c-10.8,2.1-22.5,0.3-34.2,0.3c-12,30.3-15.6,61.8-4.8,93.6c7.5,21.9,22.8,36,46.2,39.9
c28.8,5.1,54.5-1.2,76.1-21.8C304.8,370.1,315.4,363.3,322.7,360.1z M349.2,283.3c3.9-4.2,9.6-7.5,15-9.6c4.8-2.1,9.3,0.9,8.4,6.6
c-0.9,5.4-2.1,11.7-5.1,16.2c-8.4,13.2-21.6,20.4-36.9,25.8C333.9,307.3,339,293.8,349.2,283.3z"/>
<path id="RE_Mask" fill="none" stroke="#DC0031" stroke-width="56" stroke-linecap="round" stroke-miterlimit="10" d="
M304.9,328.8c-3.2-58.9,64-87.6,75.1-75.3c28.7,31.8,10.9,67.7-132.2,137.4c-78.5-9.5-54.6-92.8-54.6-92.8c56-1,72.4-30.1,75.7-51.9
c2.3-14.8,16.3-68.6-86-68c-118.4,0.7-118.3,94-118.3,94"/>
<path id="R" fill="#FFFFFF" d="M159.1,196.5c0,0-3.9-3.2-10.1-3.8c-9.5-1-24.1-2.4-23.8,9.2c-0.3,26.1-4,56.8-9.7,82.3
c-4.8,21-10.5,41.7-22.5,59.7c-5.4,8.7-12.3,15.6-22.8,18.3c-13.5,3.6-22.2-3.3-22.2-16.8c0-3.3,0.6-6.3,0.9-10.2
c-3-0.9-6-2.1-9-2.7c-17.1-3.6-33,4.2-37.8,18.6c-6.3,18.3,1.8,38.4,19.2,46.8c18,8.4,37.2,9,56.1,4.8c26.1-5.7,44.7-22.2,58.8-43.5
c24.9-39.6,33.3-84.3,36.3-130.2C173.4,216.3,171,204,159.1,196.5z"/>
<path id="R_Mask" fill="none" stroke="#DC0031" stroke-width="58" stroke-linecap="round" stroke-miterlimit="10" d="
M148.4,166.4c0,0,10.7,134.6-51.4,205.6c-25.3,28.9-77.7,31.2-70.5-40"/>
</svg>
<span id="idea" class="idea">An Idea</span>
</h1>
<svg version="1.1" id="lightbulb" class="svg lightbulb" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="289 0 382.3 571" enable-background="new 289 0 382.3 571" xml:space="preserve">
<g id="lightDashes">
<path fill="#FFFFFF" style="opacity:0" d="M321.6,279.1c-0.7,0-1.5-0.4-1.9-1c-0.6-1-0.4-2.4,0.7-3c5.5-3.4,10.7-5.9,15.7-8.2
c6.5-3.1,12.6-6,18.1-10.3c0.4-0.2,0.9-0.5,1.4-0.5c0.6,0,1.2,0.2,1.7,0.9c0.4,0.5,0.5,1,0.5,1.6c-0.1,0.6-0.4,1.1-0.7,1.5
c-5.9,4.6-12.2,7.6-18.8,10.8c-4.9,2.4-10,4.7-15.3,8C322.4,279,322,279.1,321.6,279.1z"/>
<path fill="#FFFFFF" style="opacity:0" d="M299.3,225.3c-1,0-1.9-0.7-2.1-1.7c-0.1-0.6,0-1.1,0.2-1.6c0.2-0.5,0.7-0.9,1.4-1
c11.6-2.7,23.7-4.6,35.4-6.5c3.5-0.5,7-1.1,10.3-1.6c0.1,0,0.2,0,0.4,0c1.1,0,2,0.7,2.1,1.9c0.1,0.6,0,1.1-0.4,1.6
c-0.4,0.5-0.9,0.7-1.4,0.9c-3.5,0.6-7,1.1-10.3,1.7c-11.6,1.9-23.7,3.7-35.2,6.5C299.7,225.3,299.6,225.3,299.3,225.3z"/>
<path fill="#FFFFFF" style="opacity:0" d="M296.7,190.4c-2,0-3.9,0-5.6-0.1c-0.6,0-1.1-0.2-1.5-0.7c-0.4-0.4-0.6-1-0.6-1.6c0-1.1,1-2.1,2.1-2.1
c1.9,0,3.6,0.1,5.5,0.1c6.4,0,12.7-0.4,18.8-0.6c6.2-0.4,12.6-0.6,19.1-0.6c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2
c-6.2,0-12.6,0.4-18.8,0.6C309.5,190,303.1,190.4,296.7,190.4z"/>
<path fill="#FFFFFF" style="opacity:0" d="M340.3,150.5c-0.1,0-0.1,0-0.2,0c-13.8-1.7-28.9-4.9-46-9.3c-1.1-0.4-1.9-1.5-1.5-2.7
c0.2-1,1.1-1.6,2.1-1.6c0.2,0,0.4,0,0.6,0.1c16.8,4.5,31.7,7.6,45.4,9.3c1.2,0.1,2,1.2,1.9,2.5
C342.5,149.7,341.5,150.5,340.3,150.5z"/>
<path fill="#FFFFFF" style="opacity:0" d="M372,122.4c-0.1,0-0.2,0-0.2,0c-19.6-2.7-39.9-6.4-56-16.7c-0.5-0.4-0.9-0.7-1-1.4s0-1.1,0.2-1.6
c0.4-0.6,1.1-1,1.9-1c0.4,0,0.9,0.1,1.2,0.4c15.2,9.8,35.2,13.3,54.2,16.1c0.6,0.1,1.1,0.4,1.5,0.9s0.5,1,0.4,1.6
C374,121.7,373.1,122.4,372,122.4z"/>
<path fill="#FFFFFF" style="opacity:0" d="M365,83.9c-0.4,0-0.7-0.1-1.1-0.2c-2.7-1.6-5.7-3.1-8.2-4.5c-7.2-3.9-14.7-7.9-21.3-13.2
c-1-0.7-1.1-2.1-0.2-3.1c0.4-0.5,1-0.7,1.7-0.7c0.5,0,1,0.1,1.4,0.5c6.2,5.1,13.6,9,20.6,12.7c2.7,1.5,5.6,3,8.4,4.6
c0.5,0.2,0.9,0.7,1,1.4s0.1,1.1-0.2,1.6C366.5,83.4,365.8,83.9,365,83.9z"/>
<path fill="#FFFFFF" style="opacity:0" d="M397.8,80.4c-0.6,0-1.2-0.2-1.6-0.7L363.3,41c-0.4-0.5-0.6-1-0.5-1.6c0-0.6,0.4-1.1,0.7-1.5
s0.9-0.5,1.4-0.5c0.6,0,1.2,0.2,1.6,0.7l32.8,38.5c0.4,0.5,0.6,1,0.5,1.6c0,0.6-0.4,1.1-0.7,1.5C398.8,80.2,398.3,80.4,397.8,80.4z
"/>
<path fill="#FFFFFF" style="opacity:0" d="M418.9,51.1c-0.7,0-1.5-0.4-1.9-1.1c-0.7-1.4-1.6-2.9-2.5-4.2l-0.1-0.1c-4.2-7.1-8.6-14.6-10.6-23.1
c-0.2-1.1,0.5-2.4,1.6-2.6c0.1,0,0.4,0,0.5,0c1,0,1.9,0.7,2.1,1.7c1.9,8,5.9,14.7,10.1,21.9l0.1,0.1c0.9,1.4,1.6,2.9,2.5,4.2
c0.2,0.5,0.4,1.1,0.2,1.6c-0.1,0.6-0.5,1-1,1.4C419.6,51,419.3,51.1,418.9,51.1z"/>
<path fill="#FFFFFF" style="opacity:0" d="M455.2,43c-0.9,0-1.6-0.5-2-1.4l-0.5-1.1c-5-11.6-10.2-23.7-6.6-36.5c0.2-1,1.1-1.6,2.1-1.6
c0.2,0,0.4,0,0.6,0.1c1.1,0.4,1.9,1.5,1.5,2.7c-3.1,11.5,1.7,22.8,6.5,33.7l0.5,1.1c0.2,0.5,0.2,1.1,0,1.6c-0.2,0.5-0.6,1-1.1,1.2
C455.8,42.9,455.4,43,455.2,43z"/>
<path fill="#FFFFFF" style="opacity:0" d="M497.3,46.5c-1.1,0-2.1-0.9-2.2-2c-0.1-1.6-0.4-3.4-0.6-5v-0.2c-1.5-12.7-3.1-25.8,0.7-37.8
c0.2-0.9,1.1-1.5,2.1-1.5c0.2,0,0.5,0,0.6,0.1c1.1,0.4,1.7,1.6,1.4,2.7c-3.5,11.1-2,23.7-0.5,35.9V39c0.2,1.7,0.4,3.4,0.6,5.1
c0.1,1.2-0.7,2.2-2,2.4L497.3,46.5z"/>
<path fill="#FFFFFF" style="opacity:0" d="M529,47.6c-0.2,0-0.6,0-0.9-0.1c-1.1-0.5-1.6-1.7-1.1-2.9c1.1-2.7,2.1-5.7,3.2-8.9c3-8.7,6-17.7,12.7-22.4
c0.4-0.2,0.7-0.4,1.2-0.4c0.7,0,1.4,0.4,1.9,1c0.6,1,0.4,2.4-0.6,3c-5.6,3.9-8.4,12.1-11.1,20.1c-1.1,3.2-2.1,6.4-3.4,9.3
C530.6,47.1,529.8,47.6,529,47.6z"/>
<path fill="#FFFFFF" style="opacity:0" d="M558.3,52.4c-0.4,0-0.7-0.1-1.1-0.2c-1-0.6-1.4-2-0.9-3c1.4-2.4,2.6-4.7,3.9-7.1c4.2-7.9,8.6-16,15.2-22.6
c0.4-0.4,1-0.6,1.6-0.6s1.1,0.2,1.5,0.6c0.9,0.9,0.9,2.2,0,3.1c-6.1,6.2-10.3,14-14.5,21.6c-1.2,2.4-2.6,4.9-4,7.2
C559.8,51.9,559,52.4,558.3,52.4z"/>
<path fill="#FFFFFF" style="opacity:0" d="M568.7,81.5c-0.5,0-0.9-0.1-1.2-0.4c-1-0.7-1.2-2-0.5-3c4.9-7,10.5-13.3,16-19.4c2.7-3.1,5.9-6.5,8.7-10
c0.4-0.5,1-0.7,1.7-0.7c0.5,0,1,0.1,1.4,0.5c0.9,0.7,1,2.1,0.2,3.1c-2.9,3.4-5.9,6.7-8.7,10c-5.5,6.1-11.1,12.3-15.7,19.1
C570.2,81.2,569.5,81.5,568.7,81.5z"/>
<path fill="#FFFFFF" style="opacity:0" d="M596.9,102.6c-0.2,0-0.6,0-0.9-0.1c-0.5-0.2-1-0.6-1.1-1.2c-0.2-0.5-0.2-1.1,0-1.6
c3.9-9.2,13.8-16,21.9-21.3l1.1-0.7c0.4-0.2,0.7-0.4,1.2-0.4c0.7,0,1.4,0.4,1.9,1c0.6,1,0.4,2.4-0.6,3l-1.1,0.7
c-7.6,5-17,11.3-20.3,19.3C598.5,102,597.8,102.6,596.9,102.6z"/>
<path fill="#FFFFFF" style="opacity:0" d="M607.4,130.6c-0.6,0-1.2-0.2-1.7-0.9c-0.7-1-0.6-2.4,0.4-3.1c10.5-8.4,22.6-14.7,34.2-20.9
c7-3.7,14.3-7.6,21.1-12c0.4-0.2,0.7-0.4,1.1-0.4c0.7,0,1.5,0.4,1.9,1c0.4,0.5,0.4,1.1,0.2,1.6c-0.1,0.6-0.5,1-1,1.4
c-7,4.4-14.3,8.2-21.3,12.1c-11.5,6.1-23.3,12.5-33.5,20.6C608.4,130.4,607.9,130.6,607.4,130.6z"/>
<path fill="#FFFFFF" style="opacity:0" d="M623.9,154c-1.1,0-2-0.9-2.1-2c-0.1-0.6,0.1-1.1,0.5-1.6c0.4-0.5,0.9-0.7,1.5-0.9c13-1.5,25.7-4.6,38-7.7
l1.5-0.4c0.1,0,0.4-0.1,0.5-0.1c1,0,1.9,0.6,2.1,1.6c0.1,0.6,0,1.1-0.2,1.6c-0.2,0.5-0.7,0.9-1.4,1l-1.5,0.4
c-12.5,3.1-25.4,6.4-38.6,7.9C624,154,624,154,623.9,154z"/>
<path fill="#FFFFFF" style="opacity:0" d="M625.2,185.6c-1.2,0-1.9-0.1-2.5-1.1c-0.4-0.6-0.5-1.5,0-2.2c0.7-1.2,0.7-1.4,22.4-3
c10.2-0.7,21.8-1.6,24.6-1.6c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-4.5,0-30.8,2.1-40.8,3c-0.4,0.2-0.7,0.5-1.2,0.5
C626.5,185.6,625.7,185.6,625.2,185.6z"/>
<path fill="#FFFFFF" style="opacity:0" d="M663.6,219.4c-0.1,0-0.2,0-0.5,0c-5.7-1.1-11.6-1.7-17.3-2.5c-5.5-0.6-11-1.2-16.6-2.2
c-1.2-0.2-2-1.4-1.7-2.5c0.2-1,1.1-1.7,2.1-1.7c0.1,0,0.2,0,0.4,0c5.4,1,10.8,1.6,16.2,2.2c5.9,0.6,11.8,1.2,17.8,2.5
c1.2,0.2,2,1.4,1.7,2.6C665.6,218.7,664.7,219.4,663.6,219.4z"/>
<path fill="#FFFFFF" style="opacity:0" d="M669.5,248.7c-12.7,0-27.4-0.9-39.6-7.2c-0.5-0.2-0.9-0.7-1.1-1.2c-0.1-0.5-0.1-1.1,0.1-1.6
c0.4-0.7,1.1-1.1,2-1.1c0.4,0,0.7,0.1,1,0.2c11.3,6,25.4,6.7,37.7,6.7c1.2,0,2.2,1,2.2,2.2C671.7,247.7,670.7,248.7,669.5,248.7z"
/>
</g>
<g id="bulb">
<path fill="#FFFFFF" d="M499.7,395.4c-13.2,0-27.9-3.2-38.6-8.6c-19.9-10-25.7-29.8-32.4-52.7c-5.6-19.2-11.8-40.9-27.7-61.7
c-14.6-19.2-34.2-48.4-36.7-79.7c-2.5-32.2,13.5-61.6,47.5-87.5c20.7-15.8,42.5-23.8,64.8-23.8c60.5,0,107.2,58.7,116.4,78.9
c13.5,29.5,17.6,53.1,12.6,74.4c-4.5,19.2-15.8,34.8-27.8,51.2c-8.9,12.2-18.1,24.8-25.9,40.4c-5.2,10.3-5.5,17.6-5.9,24.7
c-0.4,8.7-0.7,17-9.6,29.5C529.8,390.1,516.8,395.4,499.7,395.4z M476.6,85.6c-21.3,0-42.1,7.7-62.1,22.9
c-74.2,56.6-44.4,115.8-10,161.2c16.2,21.4,22.7,43.6,28.4,63.2c6.6,22.9,12,41,30.2,50.1c10.1,5,24.1,8.1,36.7,8.1
c15.6,0,27.4-4.6,33.4-13.1c8.1-11.6,8.5-19.2,8.7-27.3c0.4-7.5,0.6-15.2,6.2-26.4c8-15.8,17.2-28.7,26.3-41
c24.2-33.2,43.3-59.2,14.7-121.3C580.1,142.4,535.1,85.6,476.6,85.6z"/>
<path fill="#FFFFFF" d="M475.6,396.9c-8.7,0-16.2-1.7-21.7-5.1c-28.2-17.5-30-28.7-33.3-49.1c-1.6-9.7-3.5-21.8-9.1-37.8
c-0.9-2.4-2-5.5-3.5-9.1c-11.5-29.5-38.5-98.6-4.6-148.8c25.4-37.8,59.6-58.6,96.1-58.6c15.3,0,30.8,3.6,45.9,10.6
c30.9,14.5,51.4,41.5,57.5,56.2c19.7,46.9-6.9,90-30.3,127.9c-7.5,12.1-14.5,23.4-20.1,34.7c-9,18.2-13.5,30-16.7,38.6
c-5.6,14.8-7.5,19.8-21.9,29.4C503.7,392.7,489,396.9,475.6,396.9z M499.6,92.7c-35,0-67.8,20.1-92.5,56.7
c-32.7,48.4-6.2,115.9,5.1,144.7l0.1,0.1c1.4,3.6,2.6,6.7,3.5,9.1c5.7,16.3,7.7,28.7,9.4,38.5c3.2,19.8,4.9,29.7,31.3,46.1
c4.7,3,11.5,4.5,19.3,4.5c12.6,0,26.3-4,35.9-10.3c13.3-8.9,15-13.1,20.3-27.3c3.2-8.7,7.7-20.6,16.8-39
c5.6-11.5,12.7-22.9,20.2-35c24.1-38.9,48.9-79.2,29.9-123.9c-5.9-14-25.4-39.9-55.4-53.9C529,96.2,514.1,92.7,499.6,92.7z"/>
<rect x="482" y="505.9" fill="#FFFFFF" width="4.2" height="31.9"/>
<path fill="#FFFFFF" d="M481,487.7c-7.5,0-14.5-0.6-19.9-1.9c-11.3-2.5-17.7-7.4-18.5-14.1c-0.1-1.1,0.1-2.4,0.6-3.4
c-1.9-1-3.4-2.1-4.2-3.5c-1.6-2.2-1.7-5-0.4-7.7c1.4-2.7,4.1-5.5,8.4-8.1c-5.6-2-8.6-5-9.1-9c-0.2-2,0.4-4.7,7.5-8.4
c-3-1-4.9-2.4-5.7-4c-1.2-2.2-1-4.9,0.6-7.1c1.7-2.6,5.6-5.1,11.2-7.6c-4.7-1-8.2-2-10.2-3.2c-2.9-1.7-2.9-3.7-2.7-4.7
c0.5-2.2,1.4-6.9,40.4-12.5c16.8-2.5,21.9-6.1,21.2-15c-0.1-1.2,0.7-2.2,2-2.4h0.2c1.1,0,2.1,0.9,2.1,2
c1.4,14.6-12.2,17.8-24.9,19.7c-29.8,4.4-35.5,7.9-36.5,8.9c0.1,0.1,0.2,0.2,0.5,0.4c2.4,1.5,8.1,2.9,16.1,4
c16.7-5.5,40.9-9.3,57.6-9.3c3.4,0,6.4,0.1,8.7,0.5c4.9,0.6,7.6,2.1,8.4,4.4c0.4,1,0.7,3.4-1.9,5.5c-1.6,1.4-4.5,2.4-7.9,3.1
c7.5,0,11.8,1.4,13.2,3.9c0.7,1.2,0.6,2.7-0.1,4c-4.7,7.6-43.1,12.3-68.4,12.3c-2,0-3.9,0-5.6-0.1c-4.2-0.1-8.1-0.5-11.2-0.9
c-9.7,4-10.1,6.2-10.1,6.4c0.4,2.7,3.9,5,10.2,6.5c14.2-6.9,36.5-11.3,61.2-12.3h0.2c3.4-0.1,6.1-0.2,8.6-0.2
c7.6,0,11.6,0.7,13.3,2.2c0.6,0.6,1.1,1.5,1.1,2.4c0.1,9.7-49.7,13.6-50.2,13.6c-3.4,0.2-8.5,0.5-14,0.5c-7.9,0-14.5-0.5-19.7-1.6
c-5.4,2.7-9,5.6-10.3,8.4c-0.6,1.2-0.6,2.2,0,3.2c0.5,0.6,1.5,1.6,3.7,2.5c5.9-4.4,18.5-8.1,37.5-10.8c12.5-1.9,26.4-3,37.7-3.2
c1,0,1.9,0,2.7,0c15.7,0,17.5,2.2,17.8,4.2c0.4,2.2,1,5.4-27.9,11.8c-6.9,1.5-16,2.4-23.9,3H490c-3.1,0.2-6.1,0.5-8.7,0.7
c-6.2,0.6-12,1-17,1l0,0c-6.9,0-12.6-0.6-17-1.9c-0.4,0.5-0.5,1-0.5,1.4c0.6,6,8.5,8.9,15,10.2c5.1,1.1,11.6,1.7,18.6,1.7
c17.1,0,32.8-3.4,34.5-6.2c0.4-0.6,1.1-1.1,1.9-1.1c0.4,0,0.7,0.1,1.1,0.2c1,0.6,1.4,2,0.7,3C515.5,484.7,496.8,487.7,481,487.7z
M452.2,466.5c3.4,0.6,7.5,0.9,12.2,0.9c4.9,0,10.5-0.4,16.5-1c2.6-0.2,5.6-0.5,8.9-0.9h0.2c7.9-0.6,16.8-1.4,23.3-2.9
c15-3.4,20.9-5.6,23.2-6.7c-2-0.4-5.7-0.7-11.8-0.7c-19.1,0-53.5,3.2-70.6,10.3C453.4,465.9,452.8,466.1,452.2,466.5z M460.5,447.4
c2,0.2,4.1,0.4,6.4,0.4c1.9,0.1,4,0.1,6,0.1c26.8,0,54.4-6.2,59.1-9.3c-1.1-0.2-3.7-0.6-9.4-0.6c-2.5,0-5.2,0.1-8.5,0.2h-0.2
C493.1,439.1,474.2,442.3,460.5,447.4z M463.6,429.8c1.9,0,3.9,0.1,5.9,0.1c28.4,0,60.8-5.9,64.2-10.1c-0.5-0.5-2.2-1.5-9-1.5
c-15.3,0-42.1,4.9-62.6,11.5C462.6,429.8,463.1,429.8,463.6,429.8z M460.2,414.5c-8.9,2.9-14.5,5.9-16.5,8.7
c-0.6,1-0.7,1.7-0.4,2.6c0.1,0.2,1.2,1.9,8.5,3.1c2.6-1,5.6-2.1,8.9-3.1c10.6-3.4,25.7-7,39.5-9.2c-2.4,0-4.4,0.1-6.1,0.1
C482.5,416.5,470,415.7,460.2,414.5z M471.5,411.3c7.5,0.6,15.5,0.9,23.1,0.9c18.3,0,31.4-1.7,35-4.6c0.4-0.4,0.5-0.5,0.5-0.5
s-0.6-1-4.9-1.5c-2-0.2-4.6-0.4-7.6-0.4C505.2,405,486.8,407.5,471.5,411.3z"/>
<path fill="#FFFFFF" d="M482,505.9c0.1-14.2,0.7-14.6,1.1-18.3c1-8.7,5.6-15,13.3-18c3.9-1.5,7.9-2.4,11.3-2.4
c3.2,0,5.9,0.7,7.7,2.1c1.7,1.2,3.7,3.6,3.5,8c0,1.1-1,2.1-2.2,2.1c-1.4-0.1-2.2-1.1-2.2-2.2c0.1-2-0.4-3.4-1.6-4.2
c-1.1-0.9-3-1.2-5.2-1.2c-2.9,0-6.4,0.7-9.7,2c-7.7,3-10.1,9.5-10.6,14.3c-0.4,3.7-1,3.8-1.1,17.8L482,505.9z"/>
<a xlink:href="#intro">
<g id="arrow">
<path fill="#FFFFFF" d="M485.2,571.9c-0.7,0.2-1.5,0.1-2.1-0.2c-1-0.7-1.1-2.1-0.4-3.1c3.9-5.1,7.9-9.3,11.6-13.3
c5-5.2,9.6-10.1,13.1-16.2c0.2-0.4,0.6-0.7,1.1-1c0.6-0.2,1.4-0.2,1.9,0.1c0.5,0.2,0.9,0.7,1,1.4c0.1,0.6,0.1,1.1-0.2,1.6
c-3.7,6.5-8.6,11.6-13.6,17c-3.7,4-7.6,8.1-11.3,13C485.8,571.5,485.6,571.7,485.2,571.9z"/>
<path fill="#FFFFFF" d="M451,544.3c-0.2-0.7-0.1-1.5,0.2-2.1c0.7-1,2.1-1.1,3.1-0.4c5.1,3.9,9.4,7.9,13.3,11.6
c5.2,5,10.2,9.6,16.2,13.1c0.4,0.2,0.7,0.6,1,1.1c0.2,0.6,0.2,1.4-0.1,1.9c-0.2,0.5-0.7,0.9-1.4,1c-0.6,0.1-1.1,0.1-1.6-0.2
c-6.5-3.7-11.6-8.5-17-13.6c-4-3.7-8.1-7.6-13.1-11.3C451.4,545.1,451.2,544.7,451,544.3z"/>
<rect x="482" y="535.4" fill="#FFFFFF" width="4.2" height="31.9"/>
<rect x="450" y="527.6" opacity="0" fill="#FFFFFF" width="59.4" height="33.4"/>
</g>
</a>
</g>
</svg>
</div>
</section>
<!-- / ANIMATED INTRO -->
<footer class="footer">
<a class="logo" href="http://www.capiche.co.nz" target="_blank" title="Visit our site">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="140 63.9 680 680" enable-background="new 140 63.9 680 680" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M480,713.9c-82.8,0-160.7-32.2-219.2-90.8C202.2,564.6,170,486.7,170,403.9s32.2-160.7,90.8-219.2
S397.2,93.9,480,93.9c82.8,0,160.7,32.2,219.2,90.8c58.6,58.6,90.8,136.4,90.8,219.2s-32.2,160.7-90.8,219.2
C640.7,681.7,562.8,713.9,480,713.9z"/>
<path fill="#DD0031" d="M480,123.9c154.6,0,280,125.4,280,280s-125.4,280-280,280s-280-125.4-280-280S325.4,123.9,480,123.9
M480,63.9c-45.9,0-90.4,9-132.4,26.7c-40.5,17.1-76.8,41.6-108.1,72.8s-55.7,67.6-72.8,108.1C149,313.5,140,358,140,403.9
c0,45.9,9,90.4,26.7,132.4c17.1,40.5,41.6,76.8,72.8,108.1c31.2,31.2,67.6,55.7,108.1,72.8c42,17.7,86.5,26.7,132.4,26.7
s90.4-9,132.4-26.7c40.5-17.1,76.8-41.6,108.1-72.8c31.2-31.2,55.7-67.6,72.8-108.1c17.7-42,26.7-86.5,26.7-132.4
c0-45.9-9-90.4-26.7-132.4c-17.1-40.5-41.6-76.8-72.8-108.1c-31.2-31.2-67.6-55.7-108.1-72.8C570.4,72.9,525.9,63.9,480,63.9
L480,63.9z"/>
</g>
<g>
<path fill="#DD0031" d="M415.7,423l-1.9-8.9l-21,13.5c-1.9,1.3-6.5,1.9-8.3-0.5c-3.2-3.8-1.3-9.5-0.5-12.7l16.5-45.2h-21.5
l-2.5,7.5c-2.5-4.5-5.7-7-9.5-8.3c-10.2-3.2-22.9,2.5-30.5,8.9c-14,12.7-21.5,28-21.5,45.2c0,7.5,4.5,22.3,16.5,23.5
c10.8,0.5,22.3-1.9,31.8-11.5c5.1,10.8,13.5,12.7,16.5,12.7c7.5,0,10.2-3.2,17.2-7L415.7,423L415.7,423z M371.8,388.6L361,417.9
c-3.2,4.5-10.8,10.8-18.5,10.8c-1.9,0-3.8-0.5-5.1-1.9c-4.5-4.5-1.9-17.2,3.2-26.7c5.1-9.5,12.7-17.2,18.5-18.5
C361.5,381,369.3,379.7,371.8,388.6L371.8,388.6z"/>
<path fill="#DD0031" d="M501.5,421.7l-2.5-7.5c0,0-19.1,12.7-21.5,14c-1.3,0.5-8.9,3.2-12.1-1.9l0,0c2.5-3.2,4.5-7.5,6.5-12.7
c5.7-15.3,6.5-27.5,3.2-34.5c-4.5-9.5-13.5-11.5-21-12.1c-8.9-0.5-15.9,3.8-21.5,9.5c-1.3-4.5-7-7.5-14-7.5h-10.2l-5.1,13.5h7
c5.1,0,5.7,3.8,4.5,7.5l-34.3,96h20.5l16.5-46.5c15.3,13.5,29.9,5.1,35,2.5c8.3,7,17.2,6.5,26.7-0.5L501.5,421.7L501.5,421.7z
M453.9,390.4c0.5,3.8-3.2,15.3-5.1,20.5c-3.8,11.5-10.2,19.1-16.5,18.5c-2.5,0-5.7-1.9-9.5-7l12.1-33.1c1.9-1.9,7-8.3,12.1-7
C450.1,383.4,453.3,386.1,453.9,390.4L453.9,390.4z"/>
<path fill="#DD0031" d="M528.5,349.2c1.9-7-1.9-13.5-8.3-13.5s-12.7,5.7-14.5,13.5c-1.9,7.5,1.9,13.5,8.3,13.5
C520.1,362.4,526.5,356.8,528.5,349.2L528.5,349.2z M539.8,423.6l-2.5-10.2l-20.5,13.5c-1.3,1.3-7,3.8-9.5-1.9
c-1.9-4.5,0-9.5,0.5-11.5l7-18.5c7.5-21-2.5-26.7-9.5-26.7c0,0-8.3,0-15.3,0l-5.1,13.5c0,0,0.5,0,7.5,0c1.9,0,2.5,1.3,3.8,1.9
c0,0,0.5,1.3-0.5,5.1l-8.9,24.8c-1.9,5.7-3.8,14-1.9,19.7c1.9,5.7,7.5,11.5,14,12.7c7,1.3,14.5-1.9,19.7-4.5L539.8,423.6
L539.8,423.6z"/>
<path fill="#DD0031" d="M601.5,421.7l-2.5-8.3c-19.7,12.7-20.5,12.7-20.5,12.7c-5.7,3.8-15.3,5.7-21.5,3.2
c-11.5-4.5-12.1-17.2-10.2-25.5c1.3-5.1,7.5-19.1,18.5-17.8c9.5,1.3,7.5,12.1,5.1,14.5l5.1,3.2c14.5-6.5,14.5-20.5,11.5-26.7
c-3.1-6.2-10.8-10.2-18.5-10.8c-14.5-1.3-33.1,6.5-42,30.5c-3.2,9.5-2.5,23.5,1.3,30.5c5.7,10.2,13.5,15.3,21.5,17.2
c8.9,1.9,15.3,1.3,22.9-1.9C579.9,440.2,585,438.9,601.5,421.7L601.5,421.7z"/>
<path fill="#DD0031" d="M683,424.2l-3.2-9.5l-21,12.1c-5.1,2.5-7,1.3-8.9-0.5c-2.5-3.2-0.5-9.5,0-11.5l5.1-13.5
c8.9-24.8-1.9-35.5-14.5-35c-6.5-0.5-12.7,3.2-12.7,3.2l19.1-52.8h-21.5L591,411.6c-2.5,7-3.8,19.7,2.5,26.7
c4.5,5.1,9.5,7.5,14.5,7l7-18.5c-1.9,0-3.2-0.5-4.5-1.9c-2.5-3.2-0.5-5.7,0-7.5l10.8-29.9c8.9-8.9,14-5.1,15.3-2.5
c1.9,3.2,0.5,5.7,0,7.5l-7,19.7c-4.5,12.1,0.5,21,1.3,22.3c2.5,6.5,9.5,9.5,14.5,10.2c5.1,0.5,10.8-1.9,15.3-4.5
C664.5,438.2,683,424.2,683,424.2L683,424.2z"/>
<path fill="#DD0031" d="M741.5,422.4l-3.2-8.9c-10.8,8.3-21.5,15.9-21.5,15.9c-5.1,3.2-10.8,3.8-17.2,1.9c-3.8-1.3-7-5.1-8.3-7
l24.2-16.5c10.2-7,14.5-20.5,8.9-29.9c-3.8-7.5-10.8-10.2-19.1-10.2c-17.2,0-34.5,12.1-38.8,31.8c-2.5,10.2-0.5,22.3,3.8,29.9
c7,12.7,22.9,20.5,36.9,17.2C723.7,442.7,735.8,427.4,741.5,422.4L741.5,422.4z M707.2,389.9c0.5,5.7-7,9.5-8.9,10.8l-11.5,8.3
c-3.2-8.9,0.5-17.2,5.1-21C701.5,381,706.5,386.1,707.2,389.9L707.2,389.9z"/>
<path fill="#DD0031" d="M339.5,330.7c-2.5-9.5-13.5-21.5-34.5-21.5c-26.1,0-52.2,12.1-71.3,44.5c-7,12.1-12.1,35-9.5,50.9
c1.3,8.9,5.7,20.5,10.2,25.5c10.2,12.7,22.3,15.3,29.9,15.9c28,1.9,50.9-22.3,56.5-29.3l-3.2-9.5c0,0-14.5,13.5-29.9,19.7
c-8.9,3.8-26.1,5.7-35-7c-8.3-10.8-8.3-33.1,0-50.3c5.7-12.1,17.8-28,37.5-33.1c9.5-2.5,20.5-0.5,23.5,9.5c3.8,10.2-7,24.2-7,24.2
l5.7,5.7C313.3,374.6,348.3,360.6,339.5,330.7L339.5,330.7z"/>
</g>
</svg>
</div>
</footer>
Raw
Relish-Animated-SVG-Sequence-(CSS-&-Velocity-JS).markdown

Relish Animated SVG Sequence (CSS & Velocity JS)

A short introduction sequence made for a single page client gift website (relish.capiche.co.nz) using animation in CSS and Velocity JS. Utilises stroke-dasharray and stroke-dashoffset to simulate a pen tracing out letters.

As the text used for the word 'relish' was outlined shapes rather than live text I was forced to animate overlaid red paths to gradually reveal the text below. If anybody has feedback or a more elegant solution, for example using masks in some way or SnapSVG I'd be interested to hear.

A Pen by John Slipper on CodePen.

License.

Raw
script.js
var globals = {
'letters': [],
'masks': []
};
// Animates a cursive section mask of the 'Relish' SVG
function animateSectionMask(index) {
// If current section exists show it and animate mask
if(index >= 0 && index < globals.masks.length) {
$(globals.letters[index]).css({"opacity": 1});
var pathLength = parseInt($(globals.masks[index]).css("stroke-dasharray"));
$(globals.masks[index])
.css({"opacity": 1})
.velocity({
"stroke-dashoffset": pathLength * 2
}, {
"duration": pathLength,
// "duration": 2000,
"easing": "linear",
})
.velocity({
"opacity": 0
}, {
// "duration": 250,
"duration": pathLength / 3,
"delay": 50,
"easing": "ease-in",
"queue": false
}
);
setTimeout(function() {
animateSectionMask(index-1); // Animate next section
}, pathLength / 4);
}
// If section does not exist finish by animating in tittle above the letter 'i' in 'Relish'
else {
$("#Tittle_Mask").velocity({
"opacity": 0,
}, {
"duration": 600,
"easing": "ease-in-out",
"delay": 2500
});
$('#bulb').velocity({opacity: 1}, {duration: 1000});
$('#idea').velocity('transition.bounceIn', {
duration: 1000,
delay: 250,
complete: function() {
$('#lightDashes path').velocity('transition.shrinkIn', {
duration: 500,
stagger: 50,
complete: function() {
$('#arrow').velocity('callout.bounce', { duration: 2000, delay: 2000 });
}
});
}
});
}
}
function initAnimation() {
/* Store non-mask section paths (i.e. the letters themselves) */
globals.letters = $('path:not([id$="_Mask"])');
/* Store section mask paths and set stroke dash array to path length */
globals.masks = $('path[id$="_Mask"]');
/* Set stroke dash array length to path length */
globals.masks.each(function(i, el) {
var pathLength = el.getTotalLength();
$(el).css({
"stroke-dasharray": pathLength
});
});
/* Trigger relish SVG animation */
animateSectionMask(globals.masks.length - 1);
}
$(function() {
initAnimation();
setInterval(initAnimation, 10000); // Repeat every 10 seconds
});
Raw
style.less
/* GLOBAL
***************/
@brand-primary: #DC0031;
@screen-sm-min: 768px;
body, html, section {
text-align: center;
color: white;
background-color: @brand-primary;
font-family: "Helvetica Neue", arial, sans-serif;
}
a {
color: inherit;
&:hover {
text-decoration: none;
}
}
/* INTRO
***************/
.intro {
.content {
position: relative;
margin: 0 auto;
padding: 0 1em;
max-width: 40em;
box-sizing: border-box;
@media (min-width: @screen-sm-min) {
padding: 2em 0 0;
}
}
.logo {
a {
display: block;
&:hover, &:active {
text-decoration: none;
}
}
.svg.relish, .idea {
display: block;
margin-left: auto;
margin-right: auto;
}
.svg.relish {
width: 60%;
max-width: 200px;
max-height: 61px;
}
.idea {
opacity: 0;
text-transform: uppercase;
}
}
.lightbulb {
width: 75%;
margin-top: 2em;
}
#relishSVG {
path {
opacity: 0;
}
path[id$="_Mask"] {
stroke-dashoffset: 0;
}
}
&.section {
.next-link {
color: inherit;
}
}
@media (min-width: @screen-sm-min) {
.logo {
position: absolute;
top: 190px;
left: 15px;
width: 100%;
.relish {
margin-left: auto;
margin-right: auto;
}
.svg.relish, .relish {
width: auto;
max-width: 160px;
}
}
.lightbulb {
width: 475px;
height: 640px;
margin-top: 0;
}
}
}
.footer {
position: relative;
height: 50px;
background-color: @brand-primary;
text-align: center;
line-height: 100%;
transition: bottom 250ms ease-out;
.logo {
display: block;
padding: 1em 0;
svg {
display: inline;
width: 80px;
}
}
}
/* FOOTER
***************/
/*@media (min-width: @screen-sm-min) {
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
height: 50px;
.logo {
position: absolute;
top: -30px;
width: 100%;
padding: 0;
}
}
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment