Jump to content

spunky1a

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

spunky1a's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. spunky1a
    yes, great, that was it, problem 2 is solved. 👍
  2. spunky1a started following SVG lines: no glowing effect on horizontal or vertical lines, why?
  3. spunky1a
    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>
×
×
  • Create New...