CODEWITHSUNDEEP
javascriptjqueryanimationsvgsnap.svg
WIWIWWIISpitFire
WIWIWWIISpitFire

Reputation: 1549

Animate a grouped/ layered SVG with Snap

With the help of genius @Sphinxxx I managed to create a SVG path animation that consists of three stages; init, click and hover. The variables are neatly created with the help of Snap.svg See the below Codepen for a working demo:

http://codepen.io/Sphinxxxx/pen/EPzmgO

I want improve on this animation by adding lines that resize depending on the state. Basically what is should look like:

enter image description hereenter image description hereenter image description here

<path d="M33.1,18.2c1.1,3.9-4.3,8.6-10.6,9.3c-5.4,0.6-1.8,6.9-7.1,8.9c-6.7,2.6-9-0.7-8.5-6c0.5-4.6-9.6-6-3.5-12
C6.7,15.3,0.6,10.1,4.9,7c4-2.9,4,7.6,13-4.1c2.7-3.5,11.4-0.1,7.4,8.2C22.4,17.2,31.2,11.6,33.1,18.2z"/>

<line x1="1.9" y1="20.5" x2="33.1" y2="20.5"/>
<line x1="4" y1="13.5" x2="24.9" y2="13.5"/>
<line x1="5.9" y1="27.5" x2="22.5" y2="27.5"/>

How can I group different kinds of SVG stuff (paths and lines) to animate together? Any help is much appriciated!

Upvotes: 0

Views: 99

Answers (2)

WIWIWWIISpitFire
WIWIWWIISpitFire

Reputation: 1549

Thanks Alvin for pointing me in the right direction. The pattern fill wasn't flexible enough for my taste although I did mange to recreate this using pattern within svg.

// pattern lines
patern = Snap("#chooseLang svg");
var line1 = patern.line(0,13,40,13);

var line2 = patern.line(0,18.5,40,18.5);

var line3 = patern.line(0,24,40,24);    

var allLines = patern.group(line1, line2, line3).pattern(0, 0, 40, 40);
allLines.attr({
        fill: "none",
        stroke: sausRed,
        strokeWidth: strokeWidth
    });

Upvotes: 0

Alvin K.
Alvin K.

Reputation: 4379

See my demo, more details on pattern fill site:-

//SVG-snap
var none = "none",
    sausRed = "#ff1a29",
    strokeWidth = 3;

var initLangSvg = "M21.5,11.5c0,2.8-1.1,5.3-2.9,7.1c-1.8,1.8-4.3,2.9-7.1,2.9c-2.8,0-5.3-1.1-7.1-2.9c-1.8-1.8-2.9-4.3-2.9-7.1c0-2.8,1.1-5.3,2.9-7.1c1.8-1.8,4.3-2.9,7.1-2.9c2.8,0,5.3,1.1,7.1,2.9C20.4,6.2,21.5,8.7,21.5,11.5z",
    hoverLangSvg = "M21.5,13.5c0,2.8-2.1,3.8-4.6,5c-4.7,2.3-3.7,5.7-6.3,7s-8.4,0.8-9.1-3.9c-0.6-4.1,1.1-5.3,1.1-8.1c0-2.8-2.5-4.9-0.1-8.1c1.8-2.3,3.6-3.9,9.1-3.9c5.2,0,4.1,4.2,7,6C20.9,8.8,21.5,10.7,21.5,13.5z",
    clickLangSvg = "M33.1,18.2c1.1,3.9-4.3,8.6-10.6,9.3c-5.4,0.6-1.8,6.9-7.1,8.9c-6.7,2.6-9-0.7-8.5-6c0.5-4.6-9.6-6-3.5-12C6.7,15.3,0.6,10.1,4.9,7c4-2.9,4,7.6,13-4.1c2.7-3.5,11.4-0.1,7.4,8.2C22.4,17.2,31.2,11.6,33.1,18.2z";
/* Triangle -> circle -> square:
var initLangSvg = "M20,9 l11,19 h-22z",
    hoverLangSvg = "M20,10 a10,10 0 1,1 -.1,0z",
    clickLangSvg = "M29,11 v18 h-18 v-18z";
*/

//Adjust path positions (recalculate path points) before we use them:
//http://snapsvg.io/docs/#Snap.path.map
var matrix = new Snap.Matrix();
initLangSvg  = Snap.path.map(initLangSvg, matrix.translate(4,7));
hoverLangSvg = Snap.path.map(hoverLangSvg, matrix.translate(1,-1));

var chooseLang = Snap("#chooseLang svg").attr({viewBox:"0,0,40,40", preserveAspectRatio:"xMidYMin"}),
    boundingBox = chooseLang.rect(0, 0, 40, 40).attr({fill: none, stroke: none, strokeWidth: none}),
    outerCircle = chooseLang.path(initLangSvg).attr({fill: "url(#lines)", stroke: sausRed, strokeWidth: strokeWidth}),
    boundingBoxGroup = chooseLang.group(outerCircle, boundingBox);

function chooseLangInit() {
    outerCircle.attr({style: "fill: url(#lines); stroke-width: 3"})
    outerCircle.animate({d: initLangSvg}, 400);
}
function chooseLangHover() {
        outerCircle.attr({style: "fill: url(#lines2); stroke-width: 3"})
    outerCircle.animate({d: hoverLangSvg}, 400);
} 
function chooseLangClick() {
        outerCircle.attr({style: "fill: url(#lines3); stroke-width: 3"})
    outerCircle.animate({d: clickLangSvg}, 400);
} 


////
$(function() {
    $('#chooseLang').hover(chooseLangHover, chooseLangInit)
                    .click(chooseLangClick);
});
.hotCornersBtn, svg {
    display: block;
    width:  40px;
    height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"> </script>

<a href="#" id="chooseLang" class="hotCornersBtn">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="lines" patternUnits="userSpaceOnUse" width="8" height="8">
      <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPiAgPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzEwJyBoZWlnaHQ9JzInIGZpbGw9JyNDRjFENkQnIC8+ICA8cmVjdCB4PScwJyB5PSc0JyB3aWR0aD0nMTAnIGhlaWdodD0nMicgZmlsbD0nI0NGMUQ2RCcgLz48L3N2Zz4="
        x="0" y="0" width="8" height="8">
      </image>
      
      </pattern>
      <pattern id="lines2" patternUnits="userSpaceOnUse" width="10" height="10">
      <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+ICA8cmVjdCB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIGZpbGw9JyNmZmYnIC8+ICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTAnIGhlaWdodD0nMicgZmlsbD0nI0NGMUQ2RCcgLz4gIDxyZWN0IHg9JzAnIHk9JzUnIHdpZHRoPScxMCcgaGVpZ2h0PScyJyBmaWxsPScjQ0YxRDZEJyAvPjwvc3ZnPg=="
        x="0" y="0" width="10" height="10">
      </image>
      
    </pattern>
      <pattern id="lines3" patternUnits="userSpaceOnUse" width="12" height="12">
      <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+ICA8cmVjdCB3aWR0aD0nMTInIGhlaWdodD0nMTInIGZpbGw9JyNmZmYnIC8+ICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTInIGhlaWdodD0nMicgZmlsbD0nI0NGMUQ2RCcgLz4gIDxyZWN0IHg9JzAnIHk9JzYnIHdpZHRoPScxMicgaGVpZ2h0PScyJyBmaWxsPScjQ0YxRDZEJyAvPjwvc3ZnPg=="
        x="0" y="0" width="12" height="12">
      </image>
      
    </pattern>
  </defs>
</svg
</a>

Upvotes: 1

Related Questions