Forums

Give help. Get help.

  • # April 10, 2018 at 8:33 am

    I’m trying to find an alternative way to display this svg+css animation I made,

    due to it’s rather poor performances.

    The animation surronds a <div> covering about the entire screen, so it’s rendered usually at high resolutions (I think that’s why the framerate is truggling).

    I am quite sure the guilty is the gaussian blur applied on the path, but I can’t think of any other way to achieve the same result, and that’s why I’m here :) .

    • by using a canvas, I wouldn’t know how to make the path glow
    • using a gif, or a video, is out of discussion

    And those are all the techniques I know.

    What would you use in this situation?

    CodePen snippet:

    I don’t actually need the blur filter, I just need that gradient along the path (neon style), any alternative way to do that is more than welcome

    # April 11, 2018 at 10:42 am

    Anyone? ༼ つ ಥ_ಥ ༽つ

    # April 12, 2018 at 3:19 am

    This may cause your problem: stroke-dashoffset: -2760;
    Try using only positive numbers with stroke-dashoffset since there are some issues when using negative stroke-dashoffset values.
    I hope this may help.

    # April 12, 2018 at 10:45 am

    Oh, thank you! (:
    That’s good to know
    I’ll definitely try that and update with results.

    # April 15, 2018 at 10:29 am

    Using positive dash offsets didn’t solve the bad framerate.
    Seems like the gaussian blur is recalculated at every frame.

    I need a trick to show that glow in a cheaper way

    # April 15, 2018 at 10:30 am

    Using positive dash offsets didn’t solve the bad framerate.
    Seems like the gaussian blur is recalculated at every frame.

    I need a trick to show that glow in a cheaper way

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag