Related
I have been playing around with this for hours and trying to think up a solution.
In this... https://jsfiddle.net/WebFlair/nc0zyjdq/78/
<div class="bg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
preserveAspectRatio="xMidYMid meet">
<path class="path" fill="none" stroke="#b0225e" stroke-linejoin="round" stroke-width="5" stroke-miterlimit="10" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
<path class="dashed" fill="none" stroke="white" stroke-width="7" stroke-linejoin="round" stroke-miterlimit="16" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg>
</div>
<style>
.bg {background:#eee;}
.dashed{
stroke-dasharray: 14;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate forwards;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
You will see a grey background and an animated white and pink dashed line.
Now I know this wont work in my example, but what I am trying to do is make the white part transparent so that it can be used on any background, keep the animation and the pink dashed line.
Can anyone think of a way to make that happen? I have gone over everything I can think of and always need the white part in order to keep the animation.
but what I am trying to do is make the white part transparent so that
it can be used on any background, keep the animation and the pink
dashed line.
The idea is as follows: use three layers
The first bottom layer will have a white path
The middle layer will have exactly the same pink path
There will be a masking path on the top layer, which will gradually
reveal the pink path
This uses the property of the mask when "stroke: white" shows the section of the pink path that is under it
And since the length of the masking path changes from zero to the maximum value (stroke-dashoffset decreases from the maximum 917 to zero), the growth of the pink path becomes visible
#keyframes dash {
from {
stroke-dashoffset: 917;
}
to {
stroke-dashoffset: 0;
}
Clarification the maximum path length is 917px
1. The first bottom layer will have a white path
.bg {background:#eee;}
#dashed {
stroke-dasharray: 14;
fill:none;
stroke:white;
stroke-width:7;
stroke-linejoin:round;
}
<div class="bg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
preserveAspectRatio="xMidYMid meet">
<!-- Bottom layer dashed white line -->
<path id="dashed" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg>
</div>
<script>
console.log(dashed.getTotalLength());
</script>
2. The middle layer will have exactly the same pink path
<style>
.bg {background:#eee;}
#dashed {
stroke-dasharray: 14;
fill:none;
stroke:white;
stroke-width:7;
stroke-linejoin:round;
}
#pink {
stroke-dasharray: 14;
fill:none;
stroke:#b0225e;
stroke-width:7;
stroke-linejoin:round;
mask:url(#msk);
}
<div class="bg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
preserveAspectRatio="xMidYMid meet">
<!-- Bottom layer dashed white line -->
<path id="dashed" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
<!-- Middle layer dashed pink line -->
<path id="pink" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg>
</div>
3. There will be a masking path on the top layer, which will gradually reveal the pink path
.bg {background:#eee;}
#dashed {
stroke-dasharray: 14;
fill:none;
stroke:white;
stroke-width:7;
stroke-linejoin:round;
}
#pink {
stroke-dasharray: 14;
fill:none;
stroke:#b0225e;
stroke-width:7;
stroke-linejoin:round;
mask:url(#msk);
}
#maskLine {
fill:none;
stroke:white;
stroke-width:7;
stroke-dasharray: 917;
stroke-dashoffset: 917;
animation: dash 5s linear alternate forwards;
}
#keyframes dash {
from {
stroke-dashoffset: 917;
}
to {
stroke-dashoffset: 0;
}
}
<div class="bg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
preserveAspectRatio="xMidYMid meet">
<defs>
<mask id="msk">
<!-- A mask layer that reveals a dashed pink line -->
<path id="maskLine" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</mask>
</defs>
<!-- Bottom layer dashed white line -->
<path id="dashed" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
<!-- Middle layer dashed pink line -->
<path id="pink" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg>
</div>
UPDATE
Filling, clearing the path on repeated clicks on the button "Play"
var dash = true;
function play() {
var path = document.getElementById('maskLine');
path.style.strokeDashoffset = (dash) ? '0' : '917.00';
dash = !dash;
}
.bg {background:#eee;}
#dashed {
stroke-dasharray: 14;
fill:none;
stroke:white;
stroke-width:7;
stroke-linejoin:round;
}
#pink {
stroke-dasharray: 14;
fill:none;
stroke:#b0225e;
stroke-width:7;
stroke-linejoin:round;
mask:url(#msk);
}
#maskLine {
fill:none;
stroke:white;
stroke-width:7;
stroke-dasharray: 917;
stroke-dashoffset: 917;
transition: stroke-dashoffset 5s linear;
}
<button onclick="play();">Play</button>
<div class="bg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
preserveAspectRatio="xMidYMid meet">
<defs>
<mask id="msk">
<!-- A mask layer that reveals a dashed pink line -->
<path id="maskLine" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591">
</path>
</path>
</mask>
</defs>
<!-- Bottom layer dashed white line -->
<path id="dashed" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
<!-- Middle layer dashed pink line -->
<path id="pink" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg>
</div>
You can do it using a mask:
.bg {
background: #eee;
}
.dashed {
stroke-dasharray: 14;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate forwards;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="bg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000" preserveAspectRatio="xMidYMid meet">
<defs>
<path id="dashed" class="dashed" fill="none" stroke="white" stroke-width="7" stroke-linejoin="round" stroke-dasharray="14" stroke-miterlimit="16" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
<mask id="mask">
<use xlink:href="#dashed"/>
</mask>
</defs>
<path class="path" fill="none" stroke="#b0225e" stroke-linejoin="round" stroke-width="5" stroke-miterlimit="10" mask="url(#mask)" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg>
</div>
You can also eliminate the duplicate path declaration by reusing the path defined in defs, but this would require additional changes, so, in order to not obfuscate things, I decided to not put that in my answer.
I am creating animated calligraphy using the stroke-dashoffset technique, applying the stroke as an animated mask on top of an SVG. This works on most browsers, but I would like to apply the same mask on top of a PNG instead. That way, even if the browser has trouble with both SVG and mask (IE...), at least it will just display the PNG as-is.
Here is a codepen of the working calligraphy with pure SVG:
https://codepen.io/benviatte/pen/PMzmYB
Here is the codepen of the non-working calligraphy where I put an image instead of the base SVG. It just displays blank, unless I remove the "mask-image" property, in which case it doesn't animate:
https://codepen.io/benviatte/pen/eqzWzJ
Finally, here is the code of the PNG version that just displays blank:
HTML:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<mask id="mask" maskUnits="userSpaceOnUse">
<path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
</mask>
</svg>
<img src="http://thehermitcrab.org/imgs/S2.png"/>
CSS:
mask path {
fill: none;
stroke: white;
stroke-width: 22;
stroke-dasharray: 237 237;
stroke-dashoffset: 237;
animation: brush 1s cubic-bezier(.6,.3,.3,.9);
animation-fill-mode: forwards;
}
#keyframes brush {
0% { stroke-dashoffset: 237; }
20% { stroke-dashoffset: 237; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
img, svg{
width: 300px;
position: absolute;
top: 0;
left: 0;
}
img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Thank you so much!!!
You can fill the masked path with an image like so:
I hope this is what you were asking.
mask path {
fill: none;
stroke: white;
stroke-width: 22;
stroke-dasharray: 237 237;
stroke-dashoffset: 237;
animation: brush 5s cubic-bezier(.6,.3,.3,.9);
animation-fill-mode: forwards;
}
#keyframes brush {
0% { stroke-dashoffset: 237; }
20% { stroke-dashoffset: 237; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
svg {
width: 300px;
height: 300px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="0" y="0" width="100" height="100" />
</pattern>
<mask id="mask" maskUnits="userSpaceOnUse">
<path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
</mask>
</defs>
<path mask="url(#mask)" fill="url(#img)" d="m 84.347106,72.730822 c -6.700057,0.41349 -13.536192,0.895 -20.004337,2.74122 -8.269143,3.35101 -15.144649,10.28592 -18.335113,18.62393 -1.745059,4.7139 -2.424554,9.829858 -1.055133,14.737138 0.971246,7.85177 6.591277,14.03623 12.594733,18.68723 4.899213,3.10976 10.516595,4.80935 15.88174,6.85728 3.598383,2.16843 7.853428,4.63947 9.276845,8.8059 0.995595,7.43174 -3.283258,14.41911 -7.577125,20.14167 -2.859338,3.25041 -7.082956,5.7682 -11.428016,6.06759 -2.76877,-0.88985 -4.676886,-3.50515 -6.467732,-5.66664 -0.8438,-2.84582 -0.503218,-6.25249 -2.88424,-8.50648 -2.356943,-2.51972 -6.848373,-3.89583 -9.901785,-1.90687 -1.783614,1.60567 -1.978665,4.29248 -0.431156,6.14634 0.628015,2.58248 4.330039,1.06794 4.996601,3.36938 -0.140661,3.29536 -3.415289,5.93264 -3.011822,9.2671 1.471965,3.46591 3.011956,7.79888 7.009623,8.93583 2.779476,2.56577 6.811098,1.17952 10.184223,1.15628 7.753544,-0.82418 15.439311,-4.27064 20.776362,-10.01337 3.918376,-5.23506 6.686713,-11.29125 9.19183,-17.29292 0.679648,-4.33031 0.214675,-8.76706 0.319579,-13.12674 -4.685098,-7.44203 -12.013326,-12.8652 -20.16128,-15.99596 -4.833407,-2.57162 -11.582728,-2.85294 -14.441374,-8.15604 -4.638062,-7.39166 -5.929022,-17.810038 -0.40541,-25.114328 3.085422,-4.36163 7.883758,-8.71782 13.633176,-8.01843 4.028691,-0.21996 8.250498,0.0932 11.561718,2.63603 2.904262,1.44386 1.746882,5.41774 0.879004,7.79388 -2.021102,4.66617 -3.832398,9.978878 -2.737189,15.088588 0.62468,1.45971 1.572558,3.02113 2.790336,3.97665 2.563411,1.00256 5.41245,0.65028 7.526616,-1.1464 2.393394,-1.33047 7.187979,-2.70727 6.367699,-6.21466 -1.29931,-1.67133 -4.660058,0.16306 -5.006198,-2.59652 -0.718456,-6.014858 3.485958,-11.212508 3.846428,-17.152098 0.2919,-3.79706 1.28679,-8.45196 -1.339374,-11.64839 -3.199638,-2.55035 -7.777181,-2.43209 -11.649229,-2.47619 z" />
</svg>
Imagine a progress-bar like this one, which creates a sensation of motion towards the left:
Note: the thin bright-green line on top of the animation is a compression artifact.
I am looking for a way to implement something similar, but in an arbitrary SVG path, such as this one:
I am trying to understand what is really going on there, e.g.:
Is it a gradient with many stops, and the stops keep moving?
Are these many adjacent, skewed rectangles moving in unison?
Is it one long sequence of skewed adjacent rectangles, with a "sliding window" moving along it?
How can such animations be conceptualized? And what would be the best practice to implement it using SVG primitives?
I am using a path twice:#a and #b. Both #a and #b have stroke-dasharray: 1 but #b id offset stroke-dashoffset: 1;
I'm animating the stroke-dashoffset for both #a and #b.
use {
stroke-dasharray: 1;
}
#a {
stroke: green;
animation: dasha 5s linear infinite;
}
#b {
stroke: DarkSeaGreen;
stroke-dashoffset: 1;
animation: dashb 5s linear infinite;
}
#keyframes dasha {
to {
stroke-dashoffset: -54.66;
}
}
#keyframes dashb {
to {
stroke-dashoffset: -53.66;
}
}
<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
<defs><path id="thePath" fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
</defs>
<use id="a" xlink:href="#thePath" />
<use id="b" xlink:href="#thePath" />
</svg>
UPDATE
If you use css variables you can use only one animation:
use {
stroke-dasharray: 1;
}
#a {
--offset:0;
stroke: green;
stroke-dashoffset: 53.66;
animation: dash 5s linear infinite;
}
#b {
--offset:1;
stroke: DarkSeaGreen;
stroke-dashoffset: 54.66;
animation: dash 5s linear infinite;
}
#keyframes dash {
to {
stroke-dashoffset: var(--offset)
}
}
<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
<defs><path id="thePath" fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
</defs>
<use id="a" xlink:href="#thePath" />
<use id="b" xlink:href="#thePath" />
</svg>
Well one way of doing it is with an animated pattern. Something like this:
<svg width="800px" height="600px">
<defs>
<pattern id="skewrect" x="0%" y="0%" width="20%" height="100%" patternTransform="skewX(30)" viewBox="-7 160 60 60">
<animate attributeName="x" from="20%" to="0%" dur="2s" repeatCount="indefinite"/>
<polygon points="0,0 0,600 20,600 20,0" fill="green"/>
<polygon points="20,40 20,600 40,600 40,20" fill="grey"/>
</pattern>
</defs>
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="url(#skewrect)" fill="none" stroke-width="10"/>
</svg>
You can also do it with a gradient, or a filter.
i have created this SVG animated logo
https://codepen.io/nikches/pen/mOoevm
based on this GIf that was provided to me.
I tried to recreate the color intelapcing of the triangles, that you can see in the GIF, by using different levels of transparency for each triangle but that didn't work.
This must be somekind of animated mask that blends all the colors together but i don't know how to recreate it using code .
Any suggestions would be much appreciated.
Take care.
below is the svg code with the animation code inlined:
<svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#fff;}
.st1{fill:none;stroke:url(#SVGID_1_);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;}
.st2{fill:none;stroke:url(#SVGID_2_);stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;}
.st3{fill:none;stroke:url(#SVGID_3_);stroke-width:23;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;}
svg {
background: black;
}
#blue {
opacity: 0;
transform: translateX(-50px);
animation: moveToPlace 1.5s 1s ease forwards;
}
#pink {
opacity: 0;
transform: translateX(-50px);
animation: moveToPlace2 1.5s 1.3s ease forwards;
}
#orange {
opacity: 0;
transform: translateX(-50px);
animation: moveToPlace2 1.5s 1.6s ease forwards;
}
#keyframes moveToPlace {
20% {
opacity:1;
}
100%{
opacity:1;
transform:translateX(0);
}
}
#keyframes moveToPlace2 {
20% {
opacity:.8;
}
100%{
opacity:.8;
transform:translateX(0);
}
}
#C {
stroke-dasharray: 240;
stroke-dashoffset: 240;
animation: dash .3s ease-in forwards;
}
#o {
stroke-dasharray: 210;
stroke-dashoffset: 210;
animation: dash .3s .3s ease-in forwards;
}
#rest {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: dash 1.5s 0.5s ease-in forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
<defs>
<clipPath id="myClip">
<path class="st0" d="M364,334.9c8.1-2.3,16.1-7.9,23.4-14.7c-1.3,7.2,2.1,11.1,8.5,10c7.3-1.2,15.5-9.1,21.9-16.3
c-1.3,7.4,2.9,12.3,11.4,11c11-1.7,23.7-15.5,34.7-30.1l0,0c7.6-9.9,14.2-20.3,19-27.3c-5.3,14.7-2.4,39.1-15.1,41.1
c-4.5,0.7-6.3-3.9-6.3-3.9l-8.3,5.7c0,0,2.4,10.4,14.6,8.4c1.3-0.2,2.4-0.5,3.7-0.8c0.1,0,0.3-0.2,0.4-0.2
c13.6-3.9,27-16.8,37-30.1c-1.7-1.2-3.6-3-5-3.8l-0.9,1.2c-4.9,6.5-10.8,12.6-16,17c4.2-13.3,3.3-32.7,11.5-51l-10-3.8
C483,255.7,471,275,458.9,291l0,0l-0.9,1.2c-9.6,12.7-19,23-24.9,23.9c-2.9,0.5-4.6-1.3-1.5-7.1l28.4-54.3l-13.3,2.1L423,301.9
c-10.1,10.8-17.9,17.2-20.5,16.4c-3.3-0.9,0-6.4,1.7-9.5l26-49.5l-13.3,2.1L396,301l-0.9,1.2c-4.9,6.5-10.8,12.6-16,17
c4.2-13.4,3.3-32.7,11.5-51l-10-3.8c-5.5,8.4-17.5,27.8-29.6,43.8l0,0l-0.9,1.2c-9.6,12.7-19,23-24.9,23.9
c-2.9,0.5-4.6-1.3-1.5-7.1l19.2-36.7c5.8-11,0.3-17.5-7.2-16.3c-5.8,0.9-11.8,4.9-18.4,12.9l5-9.5l-13.3,2.1l-20.9,39.5l-0.9,1.1
c-9.6,12.7-21.9,23.5-31.3,24.9c-8.2,1.3-13.1-3.1-6.9-14.8l1.3-2.5c8.6,2.2,24.7-2,34.7-20.9l1.9-3.6
c7.2-13.4,0.3-21.6-10.6-19.8c-10.8,1.7-19.3,8.7-25,19.3L238.5,326l-0.8,1c-4.9,6.5-10.8,12.6-16,17c4.2-13.4,3.3-32.7,11.5-51
l-10-3.8c-5.5,8.4-17.5,27.8-29.6,43.8l0,0l-0.9,1.2c-9.6,12.7-19,23-24.9,23.9c-2.9,0.5-4.6-1.3-1.5-7.1l19.2-36.7
c5.8-11,0.3-17.5-7.2-16.3c-5.8,0.9-11.8,4.9-18.4,12.9l5-9.5l-13.3,2.1L130.7,343l-0.9,1.1c-6,7.5-13.4,11.9-20.1,13l12.6-23.6
c8.1-15.2,0.6-27.3-11.9-25.3c-10.2,1.6-18.2,7-25.9,21.5L78,342.2L72.2,353c-0.3,0.5-0.5,1-0.7,1.5c-3.4,4.5-7.1,9-9.4,11.1
c-3.8,3.5-18.2,11.7-28.7,8.5C-0.8,363.7,54.2,256.6,79.7,263c7.9,2,8.6,9.9,4.9,14.4c-0.9,1.1-2.2,1.8-3.4,2.4
c-0.2,0.1-0.4,0.2-0.5,0.2l10.4,4.7c0.8-0.7,1.5-1.4,2.3-2.2c9-9.4,6.9-24-3.5-29.8c-38.7-21.5-96.2,81-85.4,119.6
c3.3,11.7,15.7,24.6,34.8,19.1c14.2-4.1,23-12.5,28.6-20.1c2.6,13.9,24.2,12.4,37.7-6.9l2.9-0.5c4-0.6,9.1-2.7,14.2-5.7l-8,15.1
l13.4-2.1l20.4-38.7c20.4-28.7,29.5-26.8,23.7-16l-17.3,32.8c-5.6,10.8-1.7,19.2,9.1,17.5c11-1.7,23.7-15.5,34.7-30.1l0,0
c7.6-9.9,14.2-20.3,19-27.3c-5.3,14.7-2.4,39.1-15.1,41.1c-4.5,0.7-6.3-3.9-6.3-3.9l-8.3,5.7c0,0,2.4,10.4,14.6,8.4
c1.3-0.2,2.4-0.5,3.7-0.8c0.1,0,0.3-0.2,0.4-0.2c9.6-2.8,19.1-10,27.4-18.7c0.4,8.5,7.2,13.6,18.1,11.9c8.4-1.3,16.8-6.3,24.5-13
l-4.5,8.6l13.4-2.1l20.4-38.7c20.4-28.7,29.5-26.8,23.7-16.1l-17.3,32.8c-5.6,10.8-1.7,19.2,9.1,17.5c11-1.7,23.7-15.5,34.7-30.1
l0,0c7.6-9.9,14.2-20.3,19-27.3c-5.3,14.7-2.4,39.1-15.1,41.1c-4.5,0.7-6.3-3.9-6.3-3.9l-8.3,5.7c0,0,2.4,10.4,14.6,8.4
c1.3-0.2,2.4-0.5,3.7-0.8C363.7,335,363.9,334.9,364,334.9 M262.8,303.4c7.7-14.4,21.3-14.4,13.3,0.7l-1.9,3.6
c-6.4,11.9-15,13-20,12L262.8,303.4z M102.3,348.4l-0.6,0.1c-4.4,0.7-7.8,4.8-7.8,9.2c0,1.7,0.5,3.1,1.3,4.3l-0.1,0.3
c-6.3,11.8-21.5,12.1-13.6-3l10.1-19.1l6.4-11.9c9.4-17.4,22.2-13.1,14.1,2L102.3,348.4z"/>
</clipPath>
</defs>
<g>
<polygon xmlns="http://www.w3.org/2000/svg" id="blue" fill="#3BBFED" points="230.5,98 230.5,224.4 345.4,161.2 "/>
<polygon xmlns="http://www.w3.org/2000/svg" id="orange" fill="#F7941D" points="214.4,64.7 214.4,191.1 329.3,127.9 "/>
<polygon xmlns="http://www.w3.org/2000/svg" id="pink" fill="#FF6FBE" points="252,64.7 252,191.1 366.9,127.9 "/>
</g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="2" y1="319.1667" x2="104.3333" y2="319.1667">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<polyline clip-path="url(#myClip)" class="st3" points="87,281.7 94.3,270.7 84.3,256 61,260.3 43.7,281.7 26.7,308 16,332.3 13.3,352 14.7,370.3 24,381.3
44.3,383.3 62.3,370.3 " id="C"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="65.8333" y1="343.5" x2="126.1667" y2="343.5">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<polygon clip-path="url(#myClip)" class="st3" points="78.7,351.3 73,363.7 75.8,373.3 84,376.7 94.3,370.3 102.3,357.3 112.7,341.3 119.7,326 119.7,315
111.7,310.7 99,316 90.7,327 84.7,338 " id="o"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="85.8333" y1="310.6667" x2="514.8333" y2="310.6667">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#fff"/>
</linearGradient>
<polyline clip-path="url(#myClip)" class="st3" points="96.3,351.5 111.7,360.3 125.3,354.3 138,343.7 147,324 156.7,303.3 121.7,371 152,319.7 165,309
176.3,303.3 183.7,303.3 179.3,317 170,331.3 160.3,349 156.7,359.3 163.7,363.3 177.3,356.3 190.3,343.7 202.7,326.7 217.3,305.7
226,292 226,299.7 221,316.7 217.3,334.7 214.4,348 205.7,356 191.3,352 221,347.3 238.3,334 248,320 257.7,323.3 269,319.7
280.7,305.7 284.7,292 278.3,286.3 266.7,288.7 260,296.3 249,314.3 240,341.7 244.7,350 256,347.3 273.7,339.3 288,328.6
302,304.7 313.7,278 279,346.3 311.7,293 323.7,284 336.7,276 342,281.3 336.7,292.7 327.7,309 319,323.5 314.3,336 324.3,339.3
342,327 356.7,305.3 373.3,281.7 385.7,266.7 379.7,286.7 376.3,304 373,322 366.9,330 357,332 348.3,326 378.7,323.3 400.3,306.7
414,279.7 421.7,261.7 394,320 396.3,325.7 408.3,320 426.3,304 441.7,278.7 451.8,256 422.3,320 431.7,320 444.7,313.5 457.7,297
477,271.7 492.7,250.3 488.3,269.3 483,298.3 478.3,310.7 467.7,314 457.3,309 490.3,302.7 505.3,286.3 " id="rest"/>
</svg>
I'm an SVG noob and am trying to animate this Squid. I can't understand why the right arm is keeps anchoring itself to the top left of the viewbox as well as anything that I animate. I've created a css animation property to try to counteract it but I feel like there is an underlying issue or a better way to do this/fix this.
I've changed the color of the right arm to red. I want it to do what the left arm is doing.
Hopefully you guys can help.
Here is my SVG Code
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="220px" height="192.8px" viewBox="0 0 80 192.8" style="enable-background:new 0 0 128 192.8;"
xml:space="preserve" preserveAspectRatio="xMidyMax meet">
<defs>
</defs>
<g class="squid">
<path id="left-arm" class="left-arm" d="M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9"/>
<path id="right-arm" class="right-arm" d="M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9"/>
<g>
<path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/>
</g>
<path id="left-mid-arm" class="left-mid-arm" d="M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6"/>
<path id="right-mid-arm" class="right-mid-arm" d="M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6"/>
<g>
<g>
<path id="right-leg" class="right-leg" d="M68.5,108.9c4,2.5,8.9,8.6,7.2,21.3c-0.1,0.4-0.1,0.8-0.2,1.2"/>
<path id="right-foot" class="right-foot" d="M51.6,156.8c-2.3,3-3.8,6.8-3.8,12.1c0,5.1,1.4,8.8,3.1,11.5"/>
</g>
</g>
<path id="left-leg" class="left-leg" d="M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18"/>
<g class="body">
<path id="body" d="M85.6,91.1c-0.9-0.7-1.4-1.4-1.7-1.9c-1.5-1.9-2.7-5.9-0.5-6h1.4c2.8,0,5-2.2,5-5v-0.4c0-4.5-5.1-5.2-5.2-5.3
c-2-0.8-3.4-2.7-3.4-5c0-2.3,1.5-4.3,3.5-5c0.1-0.1,5.1-1.5,5-5.1V5c0-2.8-2.2-5-5-5h-42c-2.8,0-5,2.2-5,5v52.4
c0,2.4,1.7,4.4,3.9,4.9c0.2,0,1.1,0.2,1.2,0.3c2,0.8,3.5,2.7,3.5,5c0,2.2-1.4,4.1-3.3,4.9c-0.1,0.1-5.4,1.2-5.3,5.3v0.4
c0,2.8,2.2,5,5,5h1.5c2.3,0,1.6,4.4,0,6c-0.8,0.8-1.7,2.1-3.6,3.5l23.4,8.9L85.6,91.1z M65,43.7L67.4,56l3.1,15.9L63.2,56
L52.7,33.2l9.9-0.4l-5-27.6l17.3,38L65,43.7z"/>
</g>
<animate
xlink:href="#left-arm"
attributeName="d"
dur="2s"
begin="0s"
repeatCount="indefinite"
values="
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;
M37.9,6.8c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M20.9,63.7c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5C44.5,121.4,62.7,49.3,78.9,6;
M37.9,6.8c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;
Z;"/>
<animate
xlink:href="#right-arm"
attributeName="d"
dur="2s"
begin="0s"
repeatCount="indefinite"
values="
M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9;
M40.3,6.2c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3C49.9,114.5,22.2,86.7,6,43.4;
M64,63.7c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5C40.4,121.4,22.2,49.3,6,6;
M40.3,6.2c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3C49.9,114.5,22.2,86.7,6,43.4;
M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9;
Z;"/>
</g>
</svg>
CSS
.left-arm,
.right-arm,
.right-leg,
.left-leg,
.right-foot,
.left-mid-arm,
.right-mid-arm{
fill:none;
stroke:#000000;
stroke-width:12;
stroke-linecap:round;
stroke-miterlimit:10;
}
g.squid {
margin-left:20px;
}
.lightning {
fill:white;
}
g.body {
fill:black;
}
.left-arm {
animation: left-arm 2s infinite;
}
.right-arm {
animation: right-arm 2s infinite;
}
#keyframes left-arm {
0% {transform: translate(0px,0px);}
20% {transform: translate(0px,0px);}
40% {transform: translate(-15px,50px);}
80% {transform: translate(0px,0px);}
100% {transform: translate(0px,0px);}
}
#keyframes right-arm {
0% {transform: translate(0px,0px);}
20% {transform: translate(0px,0px);}
40% {transform: translate(60px,50px);}
80% {transform: translate(0px,0px);}
100% {transform: translate(0px,0px);}
}
Here is a link to codepen
http://codepen.io/alcoven/pen/NbRNdd
So after a day of working at this I figured out that an elements position is specific to its surrounding elements. I was copying and pasting single paths from AI into a codepen and the actual vector information was aligned to the top left because the other shapes were not pasted along with it for reference. I ended up changing the actual vector numbers to align the shapes. The only one I had to change was the M#'s and the following number after the comma in front of each value.
<animate
xlink:href="#left-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;
M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;
M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M10,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;
M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;
Z;"/>
Here's my new pen
Hover on it.
http://codepen.io/alcoven/pen/mOrYBd?editors=1100