CSS-doodle : dessiner des motifs avec CSS

Dernière modification : juin 2022

Le code :

<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.28.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 .