Home/ Questions/Q 6571707
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:54:58+00:00

I want to do a nice effect that would do something like this: So

  • 0

I want to do a nice effect that would do something like this:
enter image description here

So far, I made a separate layer in photoshop for each colour, and I want these to slowly fade in and out. The problem is, however that each blob is about 140KB if I use PNG. Is there a better alternative like doing this in vector and blurring it in jquery? Thanks :))

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Few minutes of work below, but I still don’t find it as a best solution… I’ve overcome blur problem with simple gradient – faster… Fading should be JavaScripted.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,255,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:0" />
    </radialGradient>
  </defs>  
  <rect width="100%" height="100%"  style="fill:gray;stroke-width:1;stroke:rgb(0,0,0)" />

  <circle cx="300" cy="200" r="300"  fill="url(#grad1)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </circle>
  <circle cx="700" cy="600" r="200"  fill="url(#grad2)" >
    <animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="2s" repeatCount="indefinite" />
  </circle>
  <circle cx="100" cy="400" r="150"  fill="url(#grad3)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
  </circle>
  <circle cx="400" cy="700" r="500"  fill="url(#grad4)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="7s" repeatCount="indefinite" />
  </circle>

</svg>
    • 0