SVG linearGradient with animation keyframes together - css

I create simple example where use two path sec1 and sec2. For both path I use linearGradient with id step1 and step2. First part (sec1) work great, second part (sec2) not yet.
Sec2 must first be in hide, then change positions and scale. I try do this by keyframing, but can't hide sec2 in beginning. Also if I try to use in linearGradient attribute begin="step1.end;" it not working, and not running after filling sec1.
I want create like one animation line which begin from left to right and then from top to bottom, with first change sec2 postion and scale (in hide) after this begin drawing and show gradient animation.
My example here:
https://jsfiddle.net/0gkrch42/


You had two main problems...
Your second animation didn't start hidden because you had the gradient offset starting at "40%' instead of zero
The second problem was that when you use id.end for timing attributes, the id has to reference another <animation> element, not a graphics element.
<svg id="Logo-Defs" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="step1" x1="0" y1="0" x2="1" y2="0">
<stop offset="40%" stop-opacity="1" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="0s" />
</stop>
<stop offset="40%" stop-opacity="0" stop-color="black">
<animate id="anim1" attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="0s" />
</stop>
</linearGradient>
<linearGradient id="step2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-opacity="1" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="anim1.end;" />
</stop>
<stop offset="0%" stop-opacity="0" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="anim1.end;" />
</stop>
</linearGradient>
<g>
<path id="sec1" class="cls-1" d="M155.06,43V41.83A42.78,42.78,0,0,0,143.12,16.5c-10.62-11.07-26-12-26-12S10.86,5,3.3,5C3.27,5,.44.25.44.25L117.08.73C137,2,158,18.38,159.07,43,158.09,43,156.08,43,155.06,43Z" />
<path id="sec2" class="cls-1" d="M159.22,129.83V43.18h-4.06q.11,43.42.22,86.84,0,1.89,0,3.78v.91h3.82Z" />
</g>
</defs>
</svg>
<svg id="svg" class="Animate-Path" width="100%" height="100%" viewBox="0 0 512 650" xml:space="preserve">
<use id="Draw-sec1" xlink:href="#sec1" fill="url(#step1)" />
<use id="Draw-sec2" xlink:href="#sec2" fill="url(#step2)" />
<!--<use class="Animate-Fill" xlink:href="#Logo-Group" /> -->
</svg>

Related

Why is my SVG animation loop skipping some parts?

I am working on a little svg component that produces graphs as in the snippet below.
I want to animate it. Right now, I just try to make a breathing-like effect but the line animation doesn't loop correctly. I split it into 2 parts and use an animateTransform trick to pause one while the other is executing. It works on the first iteration but not on the second and the rest.
To the SVG Jedi who might come across this topic, please let me know if I should change some of the animation attributes to make it more smooth/performant. This is the product of many trials & errors and I'm no expert in the field.
The relevant part is here
<line :x1="ox" :y1="oy" :stroke="isHeading ? 'white' : '#FFFFF0'">
<animateTransform
id="pause"
begin="expandAnim.end"
dur="3s"
type="translate"
attributeType="XML"
attributeName="transform"
repeatCount="indefinite"
/>
<animateTransform
id="pause2"
begin="pause.end"
dur="3s"
type="translate"
attributeType="XML"
attributeName="transform"
repeatCount="indefinite"
/>
<animate
id="expandAnim"
attributeName="x2"
:from="cx"
:to="dx"
dur="3s"
begin="0; pause.end"
repeatCount="indefinite"
/>
<animate
fill="freeze"
attributeName="y2"
:from="cy"
:to="dy"
dur="3s"
begin="0; pause.end"
repeatCount="indefinite"
/>
<animate
id="collapseAnim"
attributeName="x2"
fill="freeze"
:from="dx"
:to="cx"
dur="3s"
begin="3; expandAnim.end"
repeatCount="indefinite"
/>
<animate
attributeName="y2"
fill="freeze"
:from="dy"
:to="cy"
dur="3s"
begin="3; expandAnim.end"
repeatCount="indefinite"
/>
</line>
Here is a complete snippet version (please edit if you know how to collapse the code)
svg {
background-color:black
}
.is-hl {
fill: white;
stroke: white;
}
.heading-placeholder {
fill: transparent;
stroke: white;
}
circle {
fill: transparent;
stroke: white;
}
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" class="article-fingerprint d-flex">
<rect id="overlay" width="100%" height="100%" fill="url(#g1)"></rect>
<g transform="translate(125, 125)">
<circle fill="url(#bgGradient)" cx="0" cy="0" r="64.66666666666667"></circle>
<g class="type-element" idx="0">
<line x1="3.959691317243109e-15" y1="-64.66666666666667" stroke="#FFFFF0">
<animateTransform id="pause" begin="expandAnim.end" dur="3s" type="translate" attributeType="XML" attributeName="transform" repeatCount="indefinite"></animateTransform>
<animateTransform id="pause2" begin="pause.end" dur="3s" type="translate" attributeType="XML" attributeName="transform" repeatCount="indefinite"></animateTransform>
<animate id="expandAnim" attributeName="x2" from="5.5460389524011505e-15" to="6.158362351974827e-15" dur="3s" begin="0; pause.end" repeatCount="indefinite"></animate>
<animate fill="freeze" attributeName="y2" from="-90.57368959380808" to="-100.57368959380808" dur="3s" begin="0; pause.end" repeatCount="indefinite"></animate>
<animate id="collapseAnim" attributeName="x2" fill="freeze" from="6.158362351974827e-15" to="5.5460389524011505e-15" dur="3s" begin="3; expandAnim.end" repeatCount="indefinite"></animate>
<animate attributeName="y2" fill="freeze" from="-100.57368959380808" to="-90.57368959380808" dur="3s" begin="3; expandAnim.end" repeatCount="indefinite"></animate>
</line>
<circle cx="3.959691317243109e-15" cy="-64.66666666666667" r="1" class="origin"></circle>
<!---->
<!---->
<path id="circlePath24336" d="M5.5460389524011505e-15,-90.57368959380808 L6.158362351974827e-15,-100.57368959380808 L5.5460389524011505e-15,-90.57368959380808" fill="none"></path>
<circle r="2.590702292714141">
<animateMotion dur="6s" repeatCount="indefinite" fill="freeze">
<mpath xlink:href="#circlePath24336"></mpath>
</animateMotion>
</circle>
</g>
</g>
</svg>
As a side question, as I didn't dive in the performance aspect of it yet, does it look like a wise way to proceed with this animation? Or would it be better to stick to a CSS scale animation with the center as origin?
Extra question also: is it feasible to trigger this animation on hover? I haven't spent too much time on it but since the small animated lines and circles are in a child component of the overlay used to trigger, I'm not sure of how to propagate a SVG event such as e.g. overlay.mouseover to it. Note that I'm using vue.

Since your animation was complicated. I didn't bother trying to debug it. I just rewrote it in a more simple form.
svg {
background-color:black
}
.is-hl {
fill: white;
stroke: white;
}
.heading-placeholder {
fill: transparent;
stroke: white;
}
circle {
fill: transparent;
stroke: white;
}
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" class="article-fingerprint d-flex">
<rect id="overlay" width="100%" height="100%" fill="url(#g1)"></rect>
<g transform="translate(125, 125)">
<circle fill="url(#bgGradient)" cx="0" cy="0" r="64.66666666666667"></circle>
<g class="type-element" idx="0">
<line x1="3.959691317243109e-15" y1="-64.66666666666667" stroke="#FFFFF0">
<animate attributeName="x2"
dur="6s" repeatCount="indefinite"
values="0; 0; 0"
keyTimes="0; 0.5; 1"/>
<animate attributeName="y2"
dur="6s" repeatCount="indefinite"
values="-90.573; -100.573; -90.573"
keyTimes="0; 0.5; 1"/>
</line>
<circle r="2.590702292714141">
<animateTransform attributeName="transform"
type="translate"
dur="6s" repeatCount="indefinite"
values="0,-90.573; 0,-100.573; 0,-90.573"
keyTimes="0; 0.5; 1"/>
</circle>
</g>
</g>
</svg>

How can I make gradient line segments move along an SVG path

I have an animation I would like to make on an HTML5 document. I would like to have some short line segments move along a path. The line segments should have a gradient so that the front is opaque and the tail fade out to fully transparent.
I could use a stroke-dasharray and animate an offset (https://css-tricks.com/svg-line-animation-works/#article-header-id-4) but so far as I can tell linear gradients for strokes behave essentially to the entire shape, not just the stroke segment (https://codepen.io/plava/pen/BjavpN).
Is there perhaps a way that I can take a line and slide it along another path? That would let me apply a gradient to that line alone. My lines are moving from left to right sort of following a sine wave like curve, so if the gradient doesn't bend with the line that is okay.
This is part of an Electron app, so it only needs to be compatible with a somewhat recent version of Chromium.

One way would be to use multiple paths with different length dashes and different opacities. As long as the dash arrays have the same total length, and the dashoffsets plus the first element of the dash array is the same value for each path, the ends of the dashes will be in the same position:
#path {
stroke-dasharray: 10 90;
animation: dash 5s linear alternate infinite;
stroke: black;
stroke-width: 5;
}
#path2 {
stroke-dasharray: 20 80;
animation: dash2 5s linear alternate infinite;
stroke: rgba(0,0,0,0.5);
stroke-width: 5;
}
#keyframes dash {
from {
stroke-dashoffset: 100;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash2 {
from {
stroke-dashoffset: 110;
}
to {
stroke-dashoffset: 10;
}
}
It's kind of a hassle to keep adding more css, so I automated the creation of the css using some javascript here: https://jsfiddle.net/aqwg7ed6/
That fiddle automatically creates 32 paths which creates a nice effect.

here's how i managed to do so:
<svg id="group-01" width="1668" height="1527" viewBox="0 0 1668 1527" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="loop-01" d="M 417.00,-648.50 C 647.03,-648.50 833.50,-462.03 833.50,-232.00 833.50,-232.00 833.50,253.00 833.50,253.00 833.50,483.03 647.03,669.50 417.00,669.50 417.00,669.50 417.00,669.50 417.00,669.50 186.97,669.50 0.50,483.03 0.50,253.00 0.50,253.00 0.50,-232.00 0.50,-232.00 0.50,-462.03 186.97,-648.50 417.00,-648.50 417.00,-648.50 417.00,-648.50 417.00,-648.50 Z" />
<path id="loop-02" d="M 1250.00,-648.50 C 1480.03,-648.50 1666.50,-462.03 1666.50,-232.00 1666.50,-232.00 1666.50,253.00 1666.50,253.00 1666.50,483.03 1480.03,669.50 1250.00,669.50 1250.00,669.50 1250.00,669.50 1250.00,669.50 1019.97,669.50 833.50,483.03 833.50,253.00 833.50,253.00 833.50,-232.00 833.50,-232.00 833.50,-462.03 1019.97,-648.50 1250.00,-648.50 1250.00,-648.50 1250.00,-648.50 1250.00,-648.50 Z" />
<path id="loop-03" d="M 418.00,670.50 C 648.03,670.50 834.50,856.97 834.50,1087.00 834.50,1087.00 834.50,1572.00 834.50,1572.00 834.50,1802.03 648.03,1988.50 418.00,1988.50 418.00,1988.50 418.00,1988.50 418.00,1988.50 187.97,1988.50 1.50,1802.03 1.50,1572.00 1.50,1572.00 1.50,1087.00 1.50,1087.00 1.50,856.97 187.97,670.50 418.00,670.50 418.00,670.50 418.00,670.50 418.00,670.50 Z" />
<path id="loop-04" d="M 1251.00,670.50 C 1481.03,670.50 1667.50,856.97 1667.50,1087.00 1667.50,1087.00 1667.50,1572.00 1667.50,1572.00 1667.50,1802.03 1481.03,1988.50 1251.00,1988.50 1251.00,1988.50 1251.00,1988.50 1251.00,1988.50 1020.97,1988.50 834.50,1802.03 834.50,1572.00 834.50,1572.00 834.50,1087.00 834.50,1087.00 834.50,856.97 1020.97,670.50 1251.00,670.50 1251.00,670.50 1251.00,670.50 1251.00,670.50 Z" />
<radialGradient id="fade-01" cx="0" cy="0" fx="0" fy="0" r="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#80D2B5" stop-opacity="1" offset="0" />
<stop stop-color="#0D1115" stop-opacity="0" offset="1" />
</radialGradient>
<radialGradient id="fade-02" cx="0" cy="0" fx="0" fy="0" r="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#5332D5" stop-opacity="1" offset="0" />
<stop stop-color="#0E1216" stop-opacity="0" offset="1" />
</radialGradient>
<mask id="tail-01" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-01">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-02" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-02">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-03" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-03">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-04" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-04">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
</defs>
<g style="mask:url(#tail-01)">
<circle style="fill:url(#fade-01);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-01" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-02)">
<circle style="fill:url(#fade-02);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-02" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-03)">
<circle style="fill:url(#fade-02);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-03" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-04)">
<circle style="fill:url(#fade-01);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-04" />
</animateMotion>
</circle>
</g>
<rect x="833.5" y="-648.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="834.5" y="670.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="1.5" y="670.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="0.5" y="-648.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
</svg>

unwanted horizontal line from svg mask

I'm rendering a line using an SVG mask and gradient, similar to how Github renders sparklines for their "year of activity" charts that are displayed when viewing and organization's list of repositories.
For some reason when the width of the SVG is a certain value, a horizontal line appears at the top of the lines:
The line appears to correspond to the SVG group element that houses a rectangle which is applied a mask and a gradient fill:
However, resizing the SVG to a different width results in the line not displaying:
Here is the markup for an example SVG:
body {
background: #000;
}
<svg width="281" height="50">
<defs>
<linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f03b20"></stop>
<stop offset="50%" stop-color="#feb24c"></stop>
<stop offset="100%" stop-color="#ffeda0"></stop>
</linearGradient>
<mask id="mask-36" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="-2" width="281" height="46" style="stroke: none; fill: url("#gradient-36"); mask: url("#mask-36");">
</rect>
</g>
</svg>
And here is a link to live code showing the bug:
https://bl.ocks.org/clhenrick/ed231b1ba92c87f82529c153e7c77a4e/4954afeeccc9b2d61547e08bb901a8ae23c32c83
Here is a link to an example using the same technique with no bug, just a different size width for the SVG, mask, rect and different sized path:
https://bl.ocks.org/clhenrick/e0b06bbb361780f818993e956dccc5d8/d1fcd24b4df5571ed7069f4a45ed9932a48d74c2
Furthermore, with the buggy example when I move the path element out of the mask and into the group element, the path looks correct:
https://bl.ocks.org/clhenrick/b1ac9490a5708afbcb3ef7f93bb45b3a/5df5bd70333da98d866e7f59e3dd74060ff87474
I'm not sure why this happens at certain SVG widths or SVG path sizes and not at others.

It's not clear to me why github do their sparklines graphs using that complicated arrangement of rects, masks, and transforms. It appears it may be triggering a bug in Chrome.
Have you considered just simplifying the graph? Just use the sparkline path on its own, and apply the gradient directly to it?
body {
background: #000;
}
<svg width="281" height="50">
<defs>
<linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f03b20"></stop>
<stop offset="50%" stop-color="#feb24c"></stop>
<stop offset="100%" stop-color="#ffeda0"></stop>
</linearGradient>
</defs>
<path fill="none" stroke-width="2" stroke="url(#gradient-36)" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</svg>

Am not sure what is causing the issue but here is a work around to avoid it. The idea is to hide this line by changing the position of the rect (its y value).
So here is the buggy SVG :
body {
background:black;
}
<svg width="281" height="50">
<defs>
<linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f03b20"></stop>
<stop offset="50%" stop-color="#feb24c"></stop>
<stop offset="100%" stop-color="#ffeda0"></stop>
</linearGradient>
<mask id="mask-36" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="-2" width="281" height="46" style="stroke: none; fill: url("#gradient-36"); mask: url("#mask-36");">
</rect>
</g>
</svg>
And if you change the y from -2 to 34 the line will disappear like this :
body {
background:black;
}
<svg width="281" height="50">
<defs>
<linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f03b20"></stop>
<stop offset="50%" stop-color="#feb24c"></stop>
<stop offset="100%" stop-color="#ffeda0"></stop>
</linearGradient>
<mask id="mask-36" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="34" width="281" height="46" style="stroke: none; fill: url("#gradient-36"); mask: url("#mask-36");">
</rect>
</g>
</svg>
This will of course affect the fill you are applying as it's a linear background. So you may change it to adjust the color as you need.
I made more tests trying to point out what can be the cause of the issue. I tried to eliminate some part of the SVG (like the linear-gradien) and to change some values and here is what i got :
body {
background: black;
}
svg {
display: block;
}
<svg width="281" height="50">
<defs>
<mask id="mask-36" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="0" width="281" height="46" style="stroke: none; fill:red; mask: url("#mask-36");">
</rect>
</g>
</svg>
<svg width="281" height="50">
<g transform="translate(0, 2)">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</g>
</svg>
<svg width="281" height="50">
<defs>
<mask id="mask-35" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="3" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="0" width="281" height="46" style="stroke: none; fill:red; mask: url("#mask-35");">
</rect>
</g>
</svg>
The first one is the buggy and when i tried to add the path directly into the SVG it works fine (the second one). In the third one i changed the value of stroke in the path to make it 3 and the line disappeared.
I can conclude that it's because you are using the path as a mask. It can be a bug related to some browser and not a bug with your code. In this case you can simply consider using the path directly as an element (and you have a lot of possiblities to color it using gradient) or use my trick in order to hide the bug.

SVG Image opacity gradient

I'm using this bit of code in an .svg file to apply a opacity fade out gradient on an element. The following code works well, but fades from left to right instead of vertically from top to bottom.
What code change would I need to make to achieve this? Thanks for the help!
SVG file:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
baseProfile="full">
<mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
</mask>
</svg>
CSS:
mask: url(/mypath/mask.svg#m1);

You set the direction of a gradient with the x1,y1,x2 and y2 attributes.
For a vertical gradient starting at the top and going down you need to go from (0,0) to (0,1).
<linearGradient id="g" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>

How do I create a svg drop shadow?

I've been using a bunch of tutorials to try to get my svg to have a drop shadow, but nothing is working!
Here's my fiddle: https://jsfiddle.net/5nfdovg5/
This is what I did:
Created a gradient fill called "Gradient-1". This works:
When I add the dropshadow filter (called "dropshadow"), it only shows the shadow, and none of the circle that is supposed to be on top.. just a black blurry circle:
The desired effect I would like is here:
http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow-lighter.svg
Any ideas on what I'm doing wrong?
Here's the full markup:
<svg width="200" height="200">
<defs>
<linearGradient id="Gradient-1" x1="20%" y1="30%" x2="40%" y2="80%">
<stop offset="0%" stop-color="#B8D0DE"></stop>
<stop offset="100%" stop-color="#73A2BD"></stop>
</linearGradient>
<filter id="dropshadow" xmlns="http://www.w3.org/2000/svg" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3">
<feOffset dx="2" dy="2" result="offsetblur">
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMergeNode>
</feMerge>
</feOffset>
</feGaussianBlur>
</filter>
</defs>
<circle cx="125" cy="125" r="25" filter="url(#dropshadow)" fill="url(#Gradient-1)"></circle>
</svg>

You seem to have nested the feFilter elements which the example drop shadow code you link to in the question does not do. Unnesting makes things work as expected.
<svg width="200" height="200">
<defs>
<linearGradient id="Gradient-1" x1="20%" y1="30%" x2="40%" y2="80%">
<stop offset="0%" stop-color="#B8D0DE"></stop>
<stop offset="100%" stop-color="#73A2BD"></stop>
</linearGradient>
<filter id="dropshadow" xmlns="http://www.w3.org/2000/svg" height="130%" width="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<circle cx="125" cy="125" r="25" filter="url(#dropshadow)" fill="url(#Gradient-1)"></circle>
</svg>

Resources