Background Pattern

background-pattern.markdown

Background Pattern

A Pen by Beibit Sakhanov on CodePen.

License.

index.html

<css-doodle>
  :doodle { 
    @grid: 15 / 100vmax;
    background: #fff;
	  cursor: pointer;

	}
	:doodle(:hover) { --s: 1 ; }

	:after {
    content: @pick(a,A);
    font-size: 4vmax;
    color: #000;
    transform: scale(@rand(.2, .9));

  }
	
	transition: .5s cubic-bezier(.175, .885, .32, 1.275);
	transition-delay: @rand(650ms);
  transform: translateY(calc(var(--s) * 100%)) rotate(calc(var(--s) * 360deg));

	

</css-doodle>

style.scss

body {
  font: 900 100px/0.65 system-ui;
  margin: 0;
  overflow: hidden;
  width: 110%;
}
span {
  display: inline-block;
  text-indent: -2rem;
  position: relative;
}