:doodle { @grid: 20 / 100vmax; --anim: @rand(20s, 40s); } @shape: circle; background: hsla(@rand(100, 250), 100%, 69%, @rand(0.6)); transform: scale(@rand(.2, 1.2)) translate( @rand(-50%, 50%), @rand(-50%, 50%) ); animation: rotation var(--anim) linear infinite alternate; @keyframes rotation { 0% { transform: scale(@rand(.2, 1.2)) translate( @rand(-50%, 50%), @rand(-50%, 50%)) } 25% { transform: scale(@rand(.4, 1.4)) translate( @rand(-50%, 50%), @rand(-50%, 50%))} 50% { transform: scale(@rand(.2, 1.2)) translate( @rand(-50%, 50%), @rand(-50%, 50%)) ; } 75% { transform: scale(@rand(.2, .8)) translate( @rand(-50%, 50%), @rand(-50%, 50%)) } 100% { transform: scale(@rand(1, 2)) translate( @rand(-50%, 50%), @rand(-50%, 50%)) } }

CSS-doodle : dessiner des motifs avec CSS




<css-doodle grid="20">
:doodle {
@grid: 20 / 100vmax;
background: white;
--anim: @rand(20s, 40s);

}
@shape: circle;
background: hsla(@rand(100, 250), 100%, 69%, @rand(0.6));
transform:
scale(@rand(.2, 1.2))
translate(
@rand(-50%, 50%), @rand(-50%, 50%)
);
	
	 animation: rotation var(--anim) linear infinite alternate;

    @keyframes rotation {
      0% { transform: scale(@rand(.2, 1.2)) translate(
@rand(-50%, 50%), @rand(-50%, 50%)) }
      25% {  transform: scale(@rand(.4, 1.4)) translate(
@rand(-50%, 50%), @rand(-50%, 50%))}
      50% {
        
        transform: scale(@rand(.2, 1.2)) translate(
@rand(-50%, 50%), @rand(-50%, 50%)) ;
      }
      75% {  transform: scale(@rand(.2, .8)) translate(
@rand(-50%, 50%), @rand(-50%, 50%)) }
      100% {
        
       transform: scale(@rand(1, 2)) translate(
@rand(-50%, 50%), @rand(-50%, 50%))
      }
    }
	
</css-doodle>

<script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js'></script>


👉 Source, inspiration, ressources :

A lire sur ce blog un article sur les web components.

CSS-doodle 🔗 par Yuan Chuan🔗.