A Pen by Attila Bakos

Thumbnail
This awesome code was written by abakos, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright abakos ©
  • HTML
  • CSS
  • JavaScript
    <svg>
	<defs>
		<pattern id="dot" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" >
			<circle cx="10" cy="10" r="1" class="circle" />
		</pattern>
	</defs>
</svg>

<div>
	<h1>hello</h1>
	<svg class="ize">
		<rect x="0" y="0" class="rect" />
	</svg>
</div>

/*Downloaded from https://www.codeseek.co/abakos/a-pen-by-attila-bakos-VyeZjj */
    * {
	box-sizing: border-box;
}
div {
	width: 500px;
	border: 1px solid rgba(255,0,255,0.5);;
	background: rgba(0,0,0,0.05);
}
.ize {
	width: 100%;
	height: 100%;
	padding: 25px;
}
.circle {
	stroke: none;
	fill: rgba(255,0,255,0.85);
}
.rect {
	width: 100%;
	height: 100%;
	fill: url(#dot);
}
h1 {
	background: rgba(255,0,255,0.5);
	margin: 0;
	text-align: center;
}
svg {
	width: 1px;
	height: 1px;
}


/*Downloaded from https://www.codeseek.co/abakos/a-pen-by-attila-bakos-VyeZjj */
    

Comments