Question

我想知道if this pen is possible是由内联SVG动画（SMIL）创建的，没有CSS或任何JavaScript。特别感兴趣的是使发光圆的模糊和起伏，以及使混浊非常自然地淡入和淡出的随机浮动能量粒子。请帮忙！

保留下面的内容，但是方法不太复杂:(

<g id="particle1">
<animateTransform
attributeName="transform"
type="translate"
values="0 0; -10 0; 0 0; 10 0"
dur="3s"
repeatCount="indefinite"/>
<g>
  <circle cx="100" cy="200" r="2.5" fill="#899dff">
    <animateTransform
    attributeName="transform"
    type="translate"
    from="0 0"
    to="0 -200"
    dur="3s"
    repeatCount="indefinite"/>
    <animate attributeName="opacity"
        from="1" to="0" dur="3s"
        repeatCount="indefinite"/>
  </circle>
</g>
</g>

<g id="particle2">
<animateTransform
attributeName="transform"
type="translate"
values="0 0; 15 0; 0 0; -20 0"
dur="3s"
repeatCount="indefinite"/>
<g>
  <circle cx="100" cy="200" r="2.5" fill="#899dff">
    <animateTransform
    attributeName="transform"
    type="translate"
    from="25 30"
    to="25 -200"
    dur="3s"
    repeatCount="indefinite"/>
    <animate attributeName="opacity"
        from="0" to="1" dur="3s"
        repeatCount="indefinite"
        begin="2s"/>
  </circle>
 </g>
 </g>

Answer 1

我之前的评论说SVG中没有随机数生成器-嗯，那不是完全正确的。 <feTurbulence>过滤器中包含一个伪随机数生成器（请注意，您必须设置seed）。您可以通过一些创造性的调整来使用它来产生闪烁的星星。我还没有找到一个可以使星星闪烁的变体，但这也是原始作品无法实现的。

所以，这是部分答案。它不会重现整个笔，而只会重现闪烁的伪随机星。

baseFrequency越大，获得的星星就越多，但是同时您必须调整<feColorMatrix>值的最后一个数字。这是反复试验。对我来说，这似乎可行：

baseFrequency="0.04" => values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -7.8"
baseFrequency="0.1" => values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -6.7"

颜色也通过颜色矩阵定义。第五个数字定义红色通道：0等于0，1等于255。第十个数字是绿色通道，第十五个是蓝色通道。我的星星的颜色为rgb(255, 0, 153)。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="500" width="100%">
  <defs>
    <filter id="twinkle" style="color-interpolation-filters:sRGB">
      <feTurbulence stitchTiles="stitch" seed="500" type="fractalNoise" numOctaves="2" baseFrequency="0.1" />
      <feGaussianBlur stdDeviation="2" />
      <feColorMatrix result="blob" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -6.7" />
      <feGaussianBlur result="blur" stdDeviation="2" />
      <feMerge>
        <feMergeNode in="blob" />
        <feMergeNode in="blur" />
        <feMergeNode in="blur" />
      </feMerge>
    </filter>
  </defs>
  <rect height="100%" width="100%" />
  <g id="field" >
    <rect style="filter:url(#twinkle)" height="500" width="100%">
      <animate attributeName="opacity" dur="1s" repeatCount="indefinite"
               keyTimes="0;0.5;1" values="0.3;0.8;0.3" keySplines=".5 0 .4 1;.6 0 .5 1" />
      <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite"
               from="0 0" to="0 -500" />
    </rect>
  </g>
  <use xlink:href="#field" y="500" />
</svg>

内联SVG动画功能

1 个答案: