Skip to main content

Forums

This topic contains 5 replies, has 2 voices, and was last updated by  Artemis 11 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #269658

    Artemis
    Participant

    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

    #269717

    Artemis
    Participant

    Anyone? ༼ つ ಥ_ಥ ༽つ

    #269722

    Pogany
    Participant

    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.

    #269742

    Artemis
    Participant

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

    #269853

    Artemis
    Participant

    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

    #269854

    Artemis
    Participant

    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-link icon-logo-star icon-search icon-star