spunky1a

February 18

yes, great, that was it, problem 2 is solved. 👍

February 17

Hello,

1. I want to create an SVG line with flowing and glowing effect. This also works for path lines, but not for horizontal or vertical lines. As soon as I add the filter (filter: url(#glow)") in the last two lines, the lines are no longer displayed.
Why?

2. The green arc is not displayed correctly, it is cut off at the top and bottom, how can I change that?

3. Does anyone have a different or better idea for a flowing and glowing effect?

Thanks.

<html style="margin: 0; background: #000;"><body>
<svg viewBox="0 0 600 600" stroke-linecap="round" fill-opacity="0">
    <defs>
        <filter id="glow">
            <fegaussianblur class="blur" result="coloredBlur" stddeviation="5"></fegaussianblur>
            <femerge>
                <femergenode in="coloredBlur"></femergenode>
                <femergenode in="coloredBlur"></femergenode>
                <femergenode in="coloredBlur"></femergenode>
                <femergenode in="SourceGraphic"></femergenode>
            </femerge>
        </filter>
    </defs>

    /* bogen */
    <g class="svgWrapper" transform="translate(300,100)">
        <path class="exampleGlow" d="M100,250 C100,100 400,100 400,250" style="stroke-width: 15; stroke: #080; stroke-dasharray: 0; stroke-dashoffset: 100; filter: url(#glow);" transform="translate(-250,-200)"/>
	</g>
	<g class="svgWrapper" transform="translate(300,100)">
        <path class="exampleGlow" d="M100,250 C100,100 400,100 400,250" style="stroke-width: 8; stroke: #0f0; stroke-dasharray: 50 50; stroke-dashoffset: 100; filter: url(#glow); animation: move 1.0s linear infinite; box-shadow: 0px;" transform="translate(-250,-200)"/>
	</g>

    /* sinus */
    <g class="svgWrapper" transform="translate(300,275)">
        <path class="exampleGlow" d="M100,250 C200,0 300,500 400,250" style="stroke-width: 15; stroke: #800; stroke-dasharray: 0; stroke-dashoffset: 100; filter: url(#glow)" transform="translate(-250,-200)"/>
	</g>
	<g class="svgWrapper" transform="translate(300,275)">
        <path class="exampleGlow" d="M100,250 C200,0 300,500 400,250" style="stroke-width: 8; stroke: #f00; stroke-dasharray: 50 50; stroke-dashoffset: 100; filter: url(#glow); animation: move 0.7s linear infinite; box-shadow: 0px;" transform="translate(-250,-200)"/>
	</g>

    /* diagonal */
    <g class="svgWrapper" transform="translate(160,50)">
        <path class="exampleGlow" d="M50,50 L250,250" style="stroke-width: 15; stroke: #088; stroke-dasharray: 0; stroke-dashoffset: 100; filter: url(#glow)"/>
	</g>
	<g class="svgWrapper" transform="translate(160,50)">
        <path class="exampleGlow" d="M50,50 L250,250" style="stroke-width: 8; stroke: #0ff; stroke-dasharray: 45 55; stroke-dashoffset: 100; filter: url(#glow); animation: move 1.3s linear infinite; box-shadow: 0px;"/>
	</g>

    /* horizontal */
    <g class="svgWrapper" transform="translate(300,400)">
        <path class="exampleGlow" d="M100,250 H400" style="stroke-width: 15; stroke: #008; stroke-dasharray: 0; stroke-dashoffset: 100" transform="translate(-250,-200)"/>
	</g>
	<g class="svgWrapper">
        <path class="exampleGlow" d="M150,450 H450" style="stroke-width: 8; stroke: #00f; stroke-dasharray: 75 25; stroke-dashoffset: 100; animation: move 2.0s linear infinite; box-shadow: 0px;"/>
	</g>

    /* vertikal */
    <g class="svgWrapper" transform="translate(30,0)">
        <path class="exampleGlow" d="M50,50 V400" style="stroke-width: 15; stroke: #880; stroke-dasharray: 0; stroke-dashoffset: 100;"/>
	</g>
	<g class="svgWrapper" transform="translate(30,0)">
        <path class="exampleGlow" d="M50,50 V400" style="stroke-width: 8; stroke: #ff0; stroke-dasharray: 25 75; stroke-dashoffset: 100; animation: move .5s linear infinite; box-shadow: 0px;"/>
	</g>

</svg>

</body>
</html>

Sign In

spunky1a

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by spunky1a

SVG lines: no glowing effect on horizontal or vertical lines, why?

SVG lines: no glowing effect on horizontal or vertical lines, why?

Browse

Activity