So, if you check the fiddle, (https://jsfiddle.net/xXnikosXx/6jx2rpsf/3/)
I have an SVG image, with a couple of objects, and a mask. It's masking the text (colorful lines) which are hidden below it, and the plan was to animate their top position to make the text from below appear and the text from the top to disappear, to make a text scrolling effect. The text without the mask is shown in the image below, in case it helps.
here
I thought the text would appear when the animation occurs, but it doesnt (if you remove the mask, the text is shown and animated properly but they layers are wrong so the text appears above everything else)
I cant figure out a way to make the text animate properly using the mask, is there something i can use instead of the mask to get the same result, but without the text issue?
relevant code:
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="354" y="174" width="733" height="344">
<rect id="laptop-screen-front" x="354" y="174" width="733" height="344" fill="white" />
</mask>
<g mask="url(#mask0)">
<!-- some of the lines that represent text: -->
<g id="text-lines">
<line id="Line 3" x1="408" y1="194.5" x2="433" y2="194.5" stroke="#E06C60" stroke-width="5" />
<line id="Line 23" x1="438" y1="194.5" x2="463" y2="194.5" stroke="#D18C4C" stroke-width="5" />
<line id="Line 35" x1="469" y1="194.5" x2="542" y2="194.5" stroke="#7BC379" stroke-width="5" />
<line id="Line 36" x1="469" y1="209.5" x2="525" y2="209.5" stroke="#7BC379" stroke-width="5" />
</g>
Your code doesn't animate the mask. It attempts to animate the position of the text-lines g element. But SVG is not HTML. It is its own thing and doesn't support many common CSS properties: e.g. most relevant for you - there is no "top" property in SVG. The easiest way to do what you want is to get rid of all the CSS animations, and add a transform and a SMIL animation directly into the following part of the SVG.
<g mask="url(#mask0)">
<g id="text-lines" transform="translate(0 0)">
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -150; 0 0" dur="11s" repeatCount="indefinite"/>
<line id="Line 3" x1="408" .... etc.
BTW - one of the reasons to use transforms for animation is that browsers can often optimize things by doing the animation on the GPU - so it's better than viewBox or top animations.
2 methods:
with SMIL
svg#parent {
background-color: rgba(100, 148, 237, 0.3);
}
<svg id="parent" width="200" height="100" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="20" fill="white" />
<svg x="10" y="10" width="180" height="20" viewBox="0 0 180 20" >
<text x="20" y="15" > hello </text>
<text x="20" y="35" > world </text>
<animate attributeName="viewBox"
values="0 0 180 20; 0 20 180 20; 0 0 180 20"
begin="1s" dur="2s" repeatCount="indefinite" />
</svg>
</svg>
with javascript - requestAnimationFrame
(function()
{
const
svgInside = document.querySelector('#insideSVG')
, moving = .7 // change the value to slow down or speed up
;
let
stepVal = moving
, stepPos = 0
;
requestAnimationFrame(step)
;
function step()
{
stepPos += stepVal
if (stepPos<=0) stepVal = moving
if (stepPos>=20) stepVal = -moving
svgInside.setAttribute('viewBox',`0 ${stepPos} 180 20`)
requestAnimationFrame(step)
}
}
)()
svg#parent {
background-color: rgba(100, 148, 237, 0.3);
}
<svg id="parent" width="200" height="100" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="20" fill="white" />
<svg x="10" y="10" width="180" height="20" viewBox="0 0 180 20"
id="insideSVG" >
<text x="20" y="15" > hello </text>
<text x="20" y="35" > world </text>
</svg>
</svg>
For your SVG the values should be around:
<svg x="354" y="174" width="733" height="344" viewBox="354 174 733 344" >
<line x1="419" y1="187.5" ..... />
/.../
<animate attributeName="viewBox"
values="354 174 733 344; 354 520 733 344; 354 174 733 344"
begin="1s" dur="8s" repeatCount="indefinite" />
</svg>
how does <animate> work ?
– Paul LeBeau
the mdn documentation is quite complete: :
SVG animation with SMIL
<animate>
do not hesitate to consult the links to additional information pages
but if you want a general vision of the animation possibilities of your SVGs, the Wikipedia page is ideal
There is even a part showing the use of the requestAnimationFrame(), which I am using here.
PS:The Whitesmith style has been around since 1978, and no, I don't use it for aesthetic reasons but because it checks that the right pairs of braces frame the right pieces of code. For the same reasons, I put the commas in front of data lines (they are invisible [and often forgotten] at the end of the line), as well as the column alignment (both in a similar way used in Haskell)
No, the K&R is not a foolproof style, nor is it more legitimate than any other.
I have a few SVG objects in a group. It is a curve with an "X" in the middle of it. I would like to make it look a little nicer and have a drop shadow behind it. I know I can't just CSS and will have to use a filter.
The problem I'm having is getting this drop shadow to be a circle since I believe the path was made as a square. I thought about overlaying an ellipse and just making the fill none, but I wanted to know if there is a better way.
Picture of what it looks like
Code
<g class="link" data-link_id="1">
<path stroke-width="5" fill="none" d="M1732,610.0000305175781 C1832,610.0000305175781 1760.0000610351562,710.0000305175781 1861.0000610351562,710.0000305175781" stroke="#000000"></path>
<rect stroke="none" mask="url(#fc_mask_0_1)" x="1860.0000610351562" y="707.5000305175781" width="21" height="5" fill="#000000"></rect>
<defs>
<filter id="f1" x="0" y="0">
<feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<path stroke-width="5" fill="red" class="delete_link" filter="url(#f1)" transform="translate(1796.209228515625,660.2947998046875)" width="5" height="5" d="m10.84806,-5.81639c-1.08944,-1.8664 -2.56719,-3.34415 -4.43364,-4.43353c-1.86679,-1.08933 -3.90465,-1.63388 -6.11514,-1.63388c-2.21027,0 -4.24874,0.54455 -6.11519,1.63388c-1.86657,1.08921 -3.34432,2.56697 -4.43375,4.43353c-1.08949,1.86668 -1.63404,3.90515 -1.63404,6.11525c0,2.21021 0.54472,4.24835 1.63388,6.11514c1.08938,1.8664 2.56713,3.34415 4.4337,4.43364c1.86668,1.08927 3.90498,1.63388 6.11519,1.63388s4.24874,-0.54461 6.1153,-1.63388c1.86645,-1.0891 3.34415,-2.56724 4.43348,-4.43364c1.08916,-1.86662 1.63365,-3.90504 1.63365,-6.11514c0.00006,-2.21032 -0.5445,-4.24885 -1.63343,-6.11525zm-4.80668,8.98619c0.20096,0.20074 0.30158,0.43921 0.30158,0.71418c0,0.28519 -0.10062,0.52861 -0.30158,0.72935l-1.42752,1.42797c-0.2008,0.20074 -0.44415,0.30114 -0.72979,0.30114c-0.27491,0 -0.51316,-0.1004 -0.71379,-0.30114l-2.87116,-2.87149l-2.87127,2.87149c-0.20091,0.20074 -0.43882,0.30114 -0.71379,0.30114c-0.28558,0 -0.52877,-0.1004 -0.72974,-0.30114l-1.42775,-1.42797c-0.20091,-0.20074 -0.30136,-0.44415 -0.30136,-0.72935c0,-0.27491 0.10051,-0.51338 0.30136,-0.71418l2.87127,-2.87099l-2.87127,-2.87127c-0.20091,-0.20069 -0.30136,-0.43882 -0.30136,-0.71379c0,-0.28558 0.10051,-0.52877 0.30136,-0.72974l1.42775,-1.42752c0.20096,-0.20091 0.44415,-0.30136 0.72974,-0.30136c0.27497,0 0.51288,0.10051 0.71379,0.30136l2.87127,2.87105l2.87116,-2.87105c0.20057,-0.20091 0.43882,-0.30136 0.71379,-0.30136c0.28564,0 0.52899,0.10051 0.72979,0.30136l1.42752,1.42752c0.20096,0.20096 0.30158,0.44415 0.30158,0.72974c0,0.27491 -0.10062,0.5131 -0.30158,0.71379l-2.87111,2.87127l2.87111,2.87099z"></path>
</g>
The problem is that your filter begins at 0,0: <filter id="f1" x="0" y="0">and your crossed circle at -11.88/-11.88, and your shadow gets clipped.
<svg viewBox="1730 605 160 110">
<g class="link" data-link_id="1">
<path stroke-width="5" fill="none" d="M1732,610.0000305175781 C1832,610.0000305175781 1760.0000610351562,710.0000305175781 1861.0000610351562,710.0000305175781" stroke="#000000"></path>
<rect stroke="none" mask="url(#fc_mask_0_1)" x="1860.0000610351562" y="707.5000305175781" width="21" height="5" fill="#000000"></rect>
<defs>
<filter id="f1" x="-10" y="-10" height="15" width="15">
<feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<path id="test" stroke-width="5" fill="red" class="delete_link" filter="url(#f1)" transform="translate(1796.209228515625,660.2947998046875)" width="5" height="5" d="m10.84806,-5.81639c-1.08944,-1.8664 -2.56719,-3.34415 -4.43364,-4.43353c-1.86679,-1.08933 -3.90465,-1.63388 -6.11514,-1.63388c-2.21027,0 -4.24874,0.54455 -6.11519,1.63388c-1.86657,1.08921 -3.34432,2.56697 -4.43375,4.43353c-1.08949,1.86668 -1.63404,3.90515 -1.63404,6.11525c0,2.21021 0.54472,4.24835 1.63388,6.11514c1.08938,1.8664 2.56713,3.34415 4.4337,4.43364c1.86668,1.08927 3.90498,1.63388 6.11519,1.63388s4.24874,-0.54461 6.1153,-1.63388c1.86645,-1.0891 3.34415,-2.56724 4.43348,-4.43364c1.08916,-1.86662 1.63365,-3.90504 1.63365,-6.11514c0.00006,-2.21032 -0.5445,-4.24885 -1.63343,-6.11525zm-4.80668,8.98619c0.20096,0.20074 0.30158,0.43921 0.30158,0.71418c0,0.28519 -0.10062,0.52861 -0.30158,0.72935l-1.42752,1.42797c-0.2008,0.20074 -0.44415,0.30114 -0.72979,0.30114c-0.27491,0 -0.51316,-0.1004 -0.71379,-0.30114l-2.87116,-2.87149l-2.87127,2.87149c-0.20091,0.20074 -0.43882,0.30114 -0.71379,0.30114c-0.28558,0 -0.52877,-0.1004 -0.72974,-0.30114l-1.42775,-1.42797c-0.20091,-0.20074 -0.30136,-0.44415 -0.30136,-0.72935c0,-0.27491 0.10051,-0.51338 0.30136,-0.71418l2.87127,-2.87099l-2.87127,-2.87127c-0.20091,-0.20069 -0.30136,-0.43882 -0.30136,-0.71379c0,-0.28558 0.10051,-0.52877 0.30136,-0.72974l1.42775,-1.42752c0.20096,-0.20091 0.44415,-0.30136 0.72974,-0.30136c0.27497,0 0.51288,0.10051 0.71379,0.30136l2.87127,2.87105l2.87116,-2.87105c0.20057,-0.20091 0.43882,-0.30136 0.71379,-0.30136c0.28564,0 0.52899,0.10051 0.72979,0.30136l1.42752,1.42752c0.20096,0.20096 0.30158,0.44415 0.30158,0.72974c0,0.27491 -0.10062,0.5131 -0.30158,0.71379l-2.87111,2.87127l2.87111,2.87099z"></path>
</g>
</svg>
I have a path which is similar to circle. The task is to fill the path with a color with animation. The fill animation should be in circle manner and not from top to bottom or bottom to top.
my svg code is :
<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'>
<g class="svg_circle" transform = "translate(0,0)">
<path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1">
<animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
</path>
</g>
</svg>
The common "dasharray" line drawing technique would work for you, in combination with using the arrow shape as a mask.
This technique is described in this SO question
However, since the head of your arrow shape overlaps the tail, to get a "perfect" result, you may have to divide the sweep into two parts. You would draw the tail part with a tail mask, and then the second half of the shape (including the arrow head) with a separate mask.
Here's a rough imperfect version showing the technique.
<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'>
<defs>
<path id="arrow" stroke="#F0F0F0" fill="none" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1"/>
<clipPath id="arrow-clip" clipPathUnits="userSpaceOnUse">
<use xlink:href="#arrow"/>
</clipPath>
</defs>
<g clip-path="url(#arrow-clip)">
<circle cx="244" cy="200" r="158" transform="rotate(-164,244,200)"
fill="none" stroke="#4DAF4C" stroke-width="175"
stroke-dasharray="993 993">
<animate attributeName="stroke-dashoffset" from="993" to="0" begin="1s" dur="1s" fill="freeze" repeatCount="1"/>
</circle>
</g>
<use xlink:href="#arrow"/>
</svg>
Here we are animating a really thick green line, but using your shape as a clipping path so it conforms to the shape you want.
But as I mentioned, the section where the head overlaps the end of the tail is not perfect, so you may need to divide the animation into two parts as described above.
The feTurbulence filter is used to create clouds. By animating frequency value, generated clouds are zoomed in or out. I want them to slide from right to left.
I've made so far:
<svg height="0" width="0" style=";position:absolute;margin-left: -100%;">
<defs>
<filter id="imagenconturbulencias" x="0" y="0" width="100%" height="100%">
<feTurbulence result="cloud" baseFrequency=".2" seed="22" stitchTiles="nostitch" type="fractalNoise" numOctaves="3">
<animate
attributeName="baseFrequency"
calcMode="spline"
dur="5s"
values=".2;.1;"
repeatCount="indefinite"
/>
</feTurbulence>
<feComposite operator="in" in="cloud" in2="SourceGraphic"/>
</filter>
</defs>
<g stroke="none" stroke-width="4" id="rlog" fill="#eee"><path d="M34.2,13.9v19.5h-7.3V13.9H34.2z M30.5,5.2c1,0,1.8,0.3,2.6,1s1.1,1.5,1.1,2.5c0,1-0.3,1.8-1,2.5s-1.6,1-2.6,1c-1.1,0-1.9-0.3-2.6-1s-1-1.5-1-2.5c0-1,0.4-1.8,1.1-2.5S29.5,5.2,30.5,5.2z"/></g>
</svg>
<div id="a">
<svg viewBox="0 0 230 280">
<use filter="url(#imagenconturbulencias)" xlink:href="#rlog"></use>
</svg>
</div>
If you look closely, after 5 seconds animation repeats itself, as should! but it does not look so pretty.
I know this filter is used to create realistic, cloud-like structures. How do we go about moving these clouds continuously ?
feTurbulence filter takes in parameters like randomSeed numberOfOctaves and baseFrequency.
In given example I've animated value of base frequency. Since there is no more attributes to animate.
How to make this animation to appear continuous? Do we use perlin noise generator combined with matrix and displacement maps on this turbulence generated thing and animate all together somehow? (just brainstorming..)
Any help, Ideas, approaches, snippets, sincerely appreciated.
this could be black&white for simplicity, but cloud animation still is not continious. Bonus snippet
Do not animate the base frequency. For a smooth effect use a 360 hueRotate and a colorMatrix (since hueRotate cycles back to the original value).
<svg x="0px" y="0px" width="800px" height="500px" viewbox="0 0 800 500">
<script type="text/ecmascript" xlink:href="http://www.codedread.com/lib/smil.user.js"/>
<defs>
<filter id="heavycloud" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
<feTurbulence type="fractalNoise" result="cloudbase" baseFrequency=".0025" numOctaves="5" seed="24"/>
<feColorMatrix in="cloudbase" type="hueRotate" values="0" result="cloud">
<animate attributeName="values" from="0" to="360" dur="20s" repeatCount="indefinite"/>
</feColorMatrix>
<feColorMatrix in="cloud" result="wispy" type="matrix"
values="4 0 0 0 -1
4 0 0 0 -1
4 0 0 0 -1
1 0 0 0 0
"/>
<feFlood flood-color="#113388" result="blue"/>
<feBlend mode="screen" in2="blue" in="wispy"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<text x="30" y="380" filter="url(#heavycloud)" font-size="400" font-family="arial" stroke-color="blue" font-weight="bold" kerning="-75" font-stretch="condensed">SVG!</text>
</svg>
Trying to render a Hebrew text along a path in SVG causes a bug in Chrome - the glyphs are rendered backwards (left-to-right), making the text unreadable.
<svg height="220" width="190">
<defs>
<path id="MyPath2" d="M0,100 L200,100" />
</defs>
<use xlink:href="#MyPath2" fill="none" stroke="red" />
<text text-anchor="middle" dx="100" dy="0" writing-mode="rl" direction="rtl">
<textPath xlink:href="#MyPath2">
הטקסט הזה ייראה הפוך
</textPath>
</text>
</svg>
Is there a way to get around this? Is this a known bug or is there an attribute I should've used?
JSFIddle: http://jsfiddle.net/j9RnL/
After not finding an elegant solution myself, I just reversed the characters.
function reverse(s, languageCode) {
if (['he', 'ar'].indexOf(languageCode) === -1)
return s;
return s.split("").reverse().join("");
}
I modified your SVG and it seems to render correctly on Chrome 100 and Firefox 100:
<svg viewBox="0 0 190 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="MyPath2" d="M0,100 L200,100"/>
</defs>
<use href="#MyPath2" fill="none" stroke="red"/>
<text text-anchor="middle" dx="100" dy="0" writing-mode="rl" direction="rtl">
<textPath href="#MyPath2">
הטקסט הזה ייראה הפוך
</textPath>
</text>
</svg>