css-doodleで青空

css-doodleで空を作りました。
大量のbox-shadowで雲を表現しています。

ゆっくりですが、雲が変化していくアニメーションも加えています。

.html

<svg>
    <filter id="filter">
        <feTurbulence type="fractalNoise" baseFrequency=".008" numOctaves="100" />
        <feDisplacementMap in="SourceGraphic" scale="300" />
    </filter>
</svg>

css-doodle

    :doodle {
        @size: 0px;
        box-shadow: @m100( @r(100vw) @r(100vh) @r(50vmin,50vmin) @r(40vmin) @pd(#2198E8, #E9E9F1));
        animation: cloud 30s linear infinite;
        animatin-delay: 0;
        filter: url(#filter);
    }
    @keyframes cloud {
        50% {
            box-shadow: @m100( @r(100vw) @r(100vh) @r(40vmin,40vmin) @r(30vmin) @pd(#2198E8, #E9E9F1)); 
        }
    }