NIBC Lot

The circles component handles the animating background circles in other components. They behave like an AI interface talking.

Modifiers

Colors


			
				<div class="c-circles ">
	<div class="c-circle__item c-circle__item-1 c-circle--color-primary ">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1130 1075">
			<circle class="c-circle__path" cx="550.1" cy="523" r="500" />
			<circle class="c-circle__shape" cx="993.5" cy="291.7" r="4.5" />
			<path class="c-circle__shape" d="M1023.8 691.4c0.1 0.1 0.1 0.1 0.2 0.2 0.9 0.7 1.5 1.6 2 2.6 0.8 1.7 1.6 3.5 2.3 5.2 0.1 0.2 0.2 0.4 0.3 0.6l0.1 0.2c0.2 0.4 0.4 0.8 0.5 1.2 0.7 1.6 1.4 3.1 2.1 4.7 0.3 0.6 0.1 1.3-0.4 1.6 -0.3 0.2-0.6 0.3-1 0.2 -0.1 0-0.2 0-0.2-0.1 -2.9-0.8-5.7-1.5-8.6-2.3 -1.4-0.4-2.9-0.8-4.3-1.2 -0.8-0.2-1.4-0.6-2.1-1 -0.9-0.6-1.6-1.4-2.2-2.4 -0.8-1.4-1.1-2.9-0.9-4.6 0-0.4 0.1-0.7 0.2-1.1 0.4-1.3 1-2.5 2-3.4 1.2-1.2 2.7-1.9 4.4-2 0.7-0.1 1.4 0 2.2 0.1 1.1 0.2 2 0.6 2.9 1.2C1023.4 691.1 1023.7 691.3 1023.8 691.4" />
			<path class="c-circle__shape" d="M45.6 466.1c0.1-0.1 0.1-0.1 0.1-0.2 0.6-1 1.3-1.8 2.2-2.4 1.6-1.1 3.1-2.1 4.7-3.2 0.2-0.1 0.4-0.3 0.6-0.4l0.2-0.1c0.4-0.3 0.7-0.5 1.1-0.7 1.4-1 2.9-1.9 4.3-2.9 0.5-0.4 1.3-0.3 1.7 0.1 0.2 0.3 0.4 0.6 0.4 0.9 0 0.1 0 0.2 0 0.2 -0.3 3-0.5 5.9-0.8 8.9 -0.1 1.5-0.3 3-0.4 4.5 -0.1 0.8-0.3 1.5-0.7 2.2 -0.5 1-1.1 1.9-2 2.6 -1.3 1-2.7 1.6-4.3 1.7 -0.4 0-0.7 0-1.1 0 -1.4-0.1-2.6-0.6-3.7-1.4 -1.4-1-2.3-2.4-2.8-4 -0.2-0.7-0.3-1.4-0.3-2.2 0-1.1 0.2-2.1 0.7-3.1C45.4 466.5 45.5 466.2 45.6 466.1" />
			<circle class="c-circle__shape" cx="136.5" cy="804.7" r="7.5" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-2 c-circle--color-secondary ">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="597" cy="566" r="500" />
			<circle class="c-circle__shape" cx="205.2" cy="254.9" r="4" />
			<circle class="c-circle__shape" cx="1052.2" cy="358.9" r="4" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-3 c-circle--color-primary ">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="566" cy="504" r="500" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-4 c-circle--color-primary ">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="506" cy="566" r="500" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-5 c-circle--color-secondary ">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="555" cy="503" r="500" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-6 c-circle--color-primary c-circle--fat">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="559" cy="544" r="500" />
		</svg>
	</div>
</div>

Default


			
				<div class="c-circles ">
	<div class="c-circle__item c-circle__item-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1130 1075">
			<circle class="c-circle__path" cx="550.1" cy="523" r="500" />
			<circle class="c-circle__shape" cx="993.5" cy="291.7" r="4.5" />
			<path class="c-circle__shape" d="M1023.8 691.4c0.1 0.1 0.1 0.1 0.2 0.2 0.9 0.7 1.5 1.6 2 2.6 0.8 1.7 1.6 3.5 2.3 5.2 0.1 0.2 0.2 0.4 0.3 0.6l0.1 0.2c0.2 0.4 0.4 0.8 0.5 1.2 0.7 1.6 1.4 3.1 2.1 4.7 0.3 0.6 0.1 1.3-0.4 1.6 -0.3 0.2-0.6 0.3-1 0.2 -0.1 0-0.2 0-0.2-0.1 -2.9-0.8-5.7-1.5-8.6-2.3 -1.4-0.4-2.9-0.8-4.3-1.2 -0.8-0.2-1.4-0.6-2.1-1 -0.9-0.6-1.6-1.4-2.2-2.4 -0.8-1.4-1.1-2.9-0.9-4.6 0-0.4 0.1-0.7 0.2-1.1 0.4-1.3 1-2.5 2-3.4 1.2-1.2 2.7-1.9 4.4-2 0.7-0.1 1.4 0 2.2 0.1 1.1 0.2 2 0.6 2.9 1.2C1023.4 691.1 1023.7 691.3 1023.8 691.4" />
			<path class="c-circle__shape" d="M45.6 466.1c0.1-0.1 0.1-0.1 0.1-0.2 0.6-1 1.3-1.8 2.2-2.4 1.6-1.1 3.1-2.1 4.7-3.2 0.2-0.1 0.4-0.3 0.6-0.4l0.2-0.1c0.4-0.3 0.7-0.5 1.1-0.7 1.4-1 2.9-1.9 4.3-2.9 0.5-0.4 1.3-0.3 1.7 0.1 0.2 0.3 0.4 0.6 0.4 0.9 0 0.1 0 0.2 0 0.2 -0.3 3-0.5 5.9-0.8 8.9 -0.1 1.5-0.3 3-0.4 4.5 -0.1 0.8-0.3 1.5-0.7 2.2 -0.5 1-1.1 1.9-2 2.6 -1.3 1-2.7 1.6-4.3 1.7 -0.4 0-0.7 0-1.1 0 -1.4-0.1-2.6-0.6-3.7-1.4 -1.4-1-2.3-2.4-2.8-4 -0.2-0.7-0.3-1.4-0.3-2.2 0-1.1 0.2-2.1 0.7-3.1C45.4 466.5 45.5 466.2 45.6 466.1" />
			<circle class="c-circle__shape" cx="136.5" cy="804.7" r="7.5" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-2">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="597" cy="566" r="500" />
			<circle class="c-circle__shape" cx="205.2" cy="254.9" r="4" />
			<circle class="c-circle__shape" cx="1052.2" cy="358.9" r="4" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-3">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="566" cy="504" r="500" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-4">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="506" cy="566" r="500" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="555" cy="503" r="500" />
		</svg>
	</div>
	<div class="c-circle__item c-circle__item-6">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
			<circle class="c-circle__path" cx="559" cy="544" r="500" />
		</svg>
	</div>
</div>

Documentation

Modifiers

colors

c-circle--color-primary

Use this modifier to set the color of the circle and it's shapes to the primary color
c-circle--color-secondary

Use this modifier to set the color of the circle and it's shapes to the secondary color

strokeWidth

c-circle--fat

Use this modifier to set width of the stroke of the circle extra wide and make the opacity of said circle almost opaque.