Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                //- svg
- var exclamation_svg = '<svg viewBox="0 0 38 40" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M32 39L6 34L0 40V6C0 2.69922 2.69922 0 6 0H32C35.3008 0 38 2.69922 38 6V33C38 36.3008 35.3008 39 32 39ZM17 17.5555H22V31L17 30V17.5555ZM19.5 15C21.4346 15 23 13.4346 23 11.5C23 9.56543 21.4346 8 19.5 8C17.5654 8 16 9.56543 16 11.5C16 13.4346 17.5654 15 19.5 15Z"/></svg>';
- var reset = "M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z";
- var contain = "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z";
- var randomizer = "M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z";
- var clear = "M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z";
- var download = "M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z";
- var arrow = "M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z";

- var exclamation_svg_2 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245.694 104.34"> <defs><style type="text/css">.fil0{fill:#001}.fil2{fill:#F06}.fil1{fill:white}</style></defs> <g> <polygon class="fil0" points="0,6.908 245.694,0 245.694,97.432 0,104.34 "/> <path class="fil1" d="M83.017 34.92l87.803 0c0.975,0 1.772,0.797 1.772,1.772l0 0.001c0,0.974 -0.797,1.771 -1.772,1.771l-87.803 0c-0.974,0 -1.771,-0.797 -1.771,-1.771l0 -0.001c0,-0.975 0.797,-1.772 1.771,-1.772z"/> <path class="fil2" d="M103.666 30.585c3.373,0 6.108,2.734 6.108,6.107 0,3.373 -2.735,6.107 -6.108,6.107 -3.373,0 -6.107,-2.734 -6.107,-6.107 0,-3.373 2.734,-6.107 6.107,-6.107z"/> <path class="fil1" d="M87.471 61.282l11.977 0c2.809,0 5.106,2.297 5.106,5.105l0 0.001c0,2.809 -2.297,5.106 -5.106,5.106l-11.977 0c-2.809,0 -5.106,-2.297 -5.106,-5.106l0 -0.001c0,-2.808 2.297,-5.105 5.106,-5.105z"/> <path class="fil2" d="M86.682 60.296c3.373,0 6.107,2.734 6.107,6.107 0,3.372 -2.734,6.107 -6.107,6.107 -3.373,0 -6.107,-2.735 -6.107,-6.107 0,-3.373 2.734,-6.107 6.107,-6.107z"/> <path class="fil1" d="M121.624 61.282l11.978 0c2.808,0 5.105,2.297 5.105,5.105l0 0.001c0,2.809 -2.297,5.106 -5.105,5.106l-11.978 0c-2.808,0 -5.106,-2.297 -5.106,-5.106l0 -0.001c0,-2.808 2.298,-5.105 5.106,-5.105z"/> <path class="fil1" d="M121.624 61.282l11.978 0c2.808,0 5.105,2.297 5.105,5.105l0 0.001c0,2.809 -2.297,5.106 -5.105,5.106l-11.978 0c-2.808,0 -5.106,-2.297 -5.106,-5.106l0 -0.001c0,-2.808 2.298,-5.105 5.106,-5.105z"/> <path class="fil2" d="M120.836 60.296c3.373,0 6.107,2.734 6.107,6.107 0,3.372 -2.734,6.107 -6.107,6.107 -3.373,0 -6.107,-2.735 -6.107,-6.107 0,-3.373 2.734,-6.107 6.107,-6.107z"/> <path class="fil1" d="M155.778 61.282l11.977 0c2.809,0 5.106,2.297 5.106,5.105l0 0.001c0,2.809 -2.297,5.106 -5.106,5.106l-11.977 0c-2.809,0 -5.106,-2.297 -5.106,-5.106l0 -0.001c0,-2.808 2.297,-5.105 5.106,-5.105z"/> <path class="fil1" d="M155.778 61.282l11.977 0c2.809,0 5.106,2.297 5.106,5.105l0 0.001c0,2.809 -2.297,5.106 -5.106,5.106l-11.977 0c-2.809,0 -5.106,-2.297 -5.106,-5.106l0 -0.001c0,-2.808 2.297,-5.105 5.106,-5.105z"/> <path class="fil2" d="M154.989 60.296c3.373,0 6.107,2.734 6.107,6.107 0,3.372 -2.734,6.107 -6.107,6.107 -3.373,0 -6.107,-2.735 -6.107,-6.107 0,-3.373 2.734,-6.107 6.107,-6.107z"/> </g></svg>';
- var exclamation_svg_1 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.128 70.975"> <defs><style type="text/css">.fil0{fill:#001}.fil2{fill:#F06}.fil1{fill:white}</style></defs> <g> <polygon class="fil0" points="0,4.699 167.128,0 167.128,66.276 0,70.975 "/> <polygon class="fil1" points="53.942,31.813 72.217,12.277 91.252,29.065 125.181,55.759 61.1,55.347 35.236,43.662 "/> <path class="fil2" d="M89.365 33.696l9.639 0c1.755,-0.016 2.448,-0.004 3.01,0 1.038,0 1.838,0.402 2.418,1.205 0.571,0.789 0.861,1.921 0.871,3.393l0 7.777 6.372 -6.521c1.285,0 2.316,0.284 3.094,0.853 0.778,0.568 1.167,1.284 1.167,2.148 0,0.371 -0.061,0.711 -0.185,1.019 -0.124,0.309 -0.315,0.624 -0.574,0.945 -0.26,0.321 -0.593,0.661 -1.001,1.019 -0.407,0.358 -0.883,0.772 -1.426,1.241l-2.149 1.853 5.928 5.928c-0.124,1.16 -0.463,2.05 -1.019,2.667 -0.556,0.618 -1.364,0.927 -2.427,0.927 -0.79,0 -1.494,-0.192 -2.112,-0.575 -0.617,-0.382 -1.284,-1.031 -2,-1.945l-3.668 -4.594 0 6.743c-0.272,0.049 -0.673,0.117 -1.204,0.204 -0.531,0.086 -1.069,0.129 -1.612,0.129 -0.543,0 -1.031,-0.036 -1.464,-0.111 -0.432,-0.074 -0.796,-0.222 -1.092,-0.444 -0.297,-0.223 -0.526,-0.525 -0.686,-0.908 -0.16,-0.383 -0.241,-0.883 -0.241,-1.501l0 -11.96c-0.007,-1.406 -0.242,-2.693 -0.703,-3.86 -0.47,-1.186 -1.131,-2.192 -1.983,-3.019 -0.852,-0.828 -1.871,-1.47 -3.056,-1.927 -1.168,-0.45 -2.466,-0.679 -3.897,-0.686zm-21.514 19.103c-2.4,0 -4.65,-0.326 -6.751,-0.975 -2.1,-0.651 -3.925,-1.634 -5.475,-2.951 -1.55,-1.317 -2.775,-2.959 -3.675,-4.925 -0.901,-1.968 -1.351,-4.251 -1.351,-6.851 0,-2.734 0.492,-5.118 1.476,-7.151 0.983,-2.034 2.283,-3.725 3.9,-5.076 1.617,-1.35 3.467,-2.358 5.551,-3.025 2.083,-0.666 4.225,-1 6.425,-1 3.167,0 5.676,0.508 7.526,1.525 1.85,1.017 2.775,2.342 2.775,3.976 0,0.866 -0.216,1.616 -0.649,2.25 -0.434,0.633 -0.934,1.133 -1.501,1.5 -0.833,-0.5 -1.875,-0.992 -3.125,-1.475 -1.25,-0.483 -2.659,-0.725 -4.226,-0.725 -2.8,0 -5.025,0.8 -6.675,2.4 -1.651,1.6 -2.476,3.817 -2.476,6.651 0,1.533 0.225,2.858 0.675,3.975 0.45,1.117 1.059,2.033 1.826,2.75 0.767,0.717 1.65,1.251 2.65,1.6 1,0.351 2.067,0.525 3.2,0.525 0.734,0 1.384,-0.066 1.951,-0.199 0.566,-0.134 1,-0.284 1.3,-0.45 0,-2.771 -0.001,-4.491 0.027,-6.876 0.01,-1.473 0.3,-2.605 0.871,-3.394 0.5,-0.692 1.164,-1.086 2.003,-1.182l2.3 0 0.01 0.004 0.324 -0.004c0.544,0 1.081,0.032 1.612,0.094 0.531,0.063 0.932,0.12 1.204,0.174l0 2.836 0 0.047 0 6.459c0.007,1.407 0.242,2.693 0.704,3.861 0.469,1.185 1.13,2.192 1.982,3.019 0.852,0.828 1.871,1.47 3.057,1.927 1.167,0.45 2.465,0.678 3.896,0.685 -7.112,0 -14.229,-0.024 -21.341,0.001zm18.186 -9.544c0,1.507 0.29,2.662 0.87,3.464 0.581,0.803 1.39,1.205 2.427,1.205 1.038,0 1.834,-0.408 2.39,-1.223 0.556,-0.815 0.834,-1.963 0.834,-3.446 0,-1.482 -0.284,-2.624 -0.852,-3.427 -0.568,-0.802 -1.371,-1.204 -2.409,-1.204 -1.037,0 -1.84,0.402 -2.408,1.204 -0.568,0.803 -0.852,1.945 -0.852,3.427z"/> </g></svg>';



//- mixin
mixin iconSVG(path, viewBox='0 0 512 512')
	svg(viewBox=viewBox xmlns="http://www.w3.org/2000/svg")
		path(d=path)

mixin inputNumber(name, label, value, className="sitt")
	div(class=className)
		label(for= name)
			span= label
			.number
				<!-- span.number-control.nc-minus - -->
				input(id= name type="text" value= value)
				<!-- span.number-control.nc-plus + -->


mixin toggle(name, label, className="sitt", checked=false)
	div(class=className)
		label.toggle(for= name)
			span= label
			.switch
				input(id= name type="checkbox" name="toggle" checked=checked)
				i




// Контент

.contaner
	// Вспомогательный интерфейс
	.left_interface
		span.btn.exclamation(tooltip='О проекте', flow='leftDown')
			|!{exclamation_svg}

		span.btn.reset(style="display: none;")(tooltip='В начальное положение', flow='leftDown')
			+iconSVG(reset)

		span.btn.contain(style="display: ;")(tooltip='По размеру окна', flow='leftDown')
			+iconSVG(contain)

		span#progress ....
		
		
	#svg
	#svg-download.hidden
	#sittings
		// Интерфейс
		.action
			.action__drow Рисовать!
			.action__clear.action__mini-btn(tooltip='Отчистить холст', flow='left')
				+iconSVG(clear)
			.action__reset.action__mini-btn(tooltip='Сбросить настройки', flow='left')
				+iconSVG(reset)
			.action__randomizer.action__mini-btn(tooltip='Рандом', flow='left')
				+iconSVG(randomizer)
			.action__download.action__mini-btn(tooltip='Скачать', flow='left')
				+iconSVG(download)


		.DIVHeader
			span SVG
			br
			span sittings

		.DIVrange
			label(for="range-slider")
				span Число дуг
				input#range.range-slider__range(type="range" value="120" min="1" max="4000")
				input#range-slider.range-slider__value(type="text" value="1")

		.DIVwidth
			+inputNumber("width", "Ширина линий", 1)

		.DIVvector
			+inputNumber("vector", "Старт. вектор", 8)

		.DIVgrow
			+inputNumber("grow", "Растяжение", 0)

		.DIVdegrow
			+inputNumber("degrow", "Сжатие", 0)

		.DIVradius
			+inputNumber("radius", "Радиус", 1, "sitt DIVradius")

		.DIVcolor
			+toggle("color", "Цвет")
			#colorVal(style="display: none;")
				#colorValPlus(style="display: none;") +
			.DIVgradient(style="display: none;")
				+toggle("gradient", "Градиент")

		.DIVrestart
			+toggle("restart", "Рестарт")

		.DIVround
			+toggle("round", "Кручение")

		.DIVsmoothie
			+toggle("smoothie", "Сердцеед")

		.DIVpetals
			+toggle("petals", "Лепестки")

		.DIVvolna
			+toggle("volna", "Волна")

		.DIVrotation
			+toggle("rotation", "Поворот дуги", "sitt DIVrotation", true)

		.DIVgrouping
			+toggle("grouping", "Группировать")



	// презантация
	#exclamationContent.hidden
		.exclamations
			.exclamation-item.hidden
				|!{exclamation_svg_1}
				span
					|Привет, добрый человек! Я - Gok, генератор классных .svg узоров, которые вы можете использовать в своём творчестве. Нажмите "Далее", и я немного расскажу о себе.
			.exclamation-item.hidden
				|!{exclamation_svg_2}
				span
					|Здесь мои настройки. Вы можете поиграться с параметрами, чтобы разобраться в них.
			.exclamation-item.hidden
				span
					|Или позволить мне выставить их самостоятельно для демонстрации своих возможностей.
			.exclamation-item.hidden
				span
					|Жёлтая кнопка творит волшебство. Жмякните!
			.exclamation-item.hidden
				span 
					|Эта отчищает хост: чтобы «начать с чистого листа»!
			.exclamation-item.hidden
				span
					|А эта позволят скачать картинку. Пользуйтесь на здоровье!
			.exclamation-item.hidden
				span
					|Ура! Вот и познакомились. Буду рад оказаться у вас в закладках :)
				span 
					|Кстати, моему создателю будет приятно получить от вас обратную связь: 
					a(href="mailto:ask@htmlbook.ru") andreslav.k.v@mail.ru
				span
					|Мой 
					a(href="http://andreslav.ru/") сайт
		.navigations
			span.exit Закрыть
			span.backward Назад
			span.nextExclamation Далее
		.arrow.hidden
			+iconSVG(arrow, "0 0 448 512")
              
            
!

CSS

              
                * {
	box-sizing: border-box;
	outline: none;
	border: none;
	margin:0;
}

:root {
	--border-radius: 3px;

	--yellow: #ffd000;
	--black: #001;
	--light-black: #001525;
	--grey-black: #1d2537;
	--grey: #677684;
	--red: #f06;
	--white: #fafcfd;

	--delay: 600ms;
	--opacity: 1;
	--fontFamily: inherit;
	--distance: .3em;
	--borderArrow: 4px;
	--borderRadius: var(--border-radius);
	--colorBg: var(--light-black);
	--colorArrow: var(--grey-black);
	--colorText: var(--white);
	--fontSize: 14px;
	--padding: 1ch 1.2ch;
}

%user-select-none {
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}



body {
	overflow-y: hidden;
	font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
	font-size:15px;
	.contaner {
		display: grid;
		grid-template-columns: 1fr minmax(200px, 260px);
		grid-template-rows: 100vh;
	}
}

.left_interface {
	position: absolute;
	display: inline-flex;
	top: 1.4em; 
	left: 1.2em;
	.btn {
		border-radius: var(--border-radius);
		padding: .5em .5em;
		cursor: pointer;
		line-height: 0;
		svg {
			width: 1em;
			fill: var(--black);
		}
		&:hover, &:active {
			background: var(--yellow);
		}
	}
	#progress {
		color: var(--black);
		cursor: default;
		padding: .5em .5em;
		@extend %user-select-none;
	}
	.exclamation {
		@media screen and (max-width: 560px){
			display: none;
		}
		@media screen and (max-height: 540px){
			display: none;
		}
		svg {
			fill: var(--red);
		}
		&:active, &:hover {
			svg {
				fill: var(--black);
			}
		}
	}
}


#svg {
	background: var(--white);
}


#sittings {
	background: var(--black);
	overflow-y: auto;
	
	.action {
		position: absolute;
		transform: translate(-130px, 2em);
		display: grid;
		grid-gap: .6em;
		justify-items: end;
		width: 130px;
	    pointer-events: none;
	    &__drow {
			padding: 1.6em 1em;
			background: var(--yellow);
			border-radius: var(--border-radius) 0 0 var(--border-radius);
			border-right: 4px solid var(--yellow);
			font-size: 1.2em;
			font-weight: 600;
			line-height: 0;
			cursor: pointer;
			width: 120px;
			transition: all .1s ease-out;
		    text-align: center;
		    pointer-events: auto;
			@extend %user-select-none;
			&:hover, &:active {
				background: var(--yellow);
				width: 130px;
			}
		}
		&__mini-btn {
			cursor: pointer;
			padding: 1em;
			background: var(--black);
			border-radius: var(--border-radius) 0 0 var(--border-radius);
			border-right: 4px solid var(--yellow);
			text-align: center;
			line-height: 0;
			width: 50px;
			transition: all .1s ease-out;
		    pointer-events: auto;
			&:hover, &:active {
				width: 60px;
			}
		}
	}
	
	>div:not(.action)  {
		text-align: center;
		border-bottom: 1px solid var(--light-black);
		label {
			cursor: default;
			@extend %user-select-none;
		}
		&:last-child {
			border: none;
		}
		&:hover, &:active {
			background: var(--light-black);
			.number, #colorValPlus {
				color: var(--white);
				@extend %user-select-none;
			}
			input {
				background: var(--black);
			}
			.toggle .switch input {
				& ~ i {
					background: var(--grey);
				}
				&:checked ~ i {
					background: var(--yellow);
				}
			}
			.range-slider__range {
				border-top-color: var(--light-black);
				border-bottom-color: var(--light-black);
			}
		}
	}
	
	
	.DIVHeader {
		font-weight: 500;
		color: var(--white);
		cursor: default;
		padding: 2em;
		span {
			&:first-child {
				font-size: 2em;
				font-weight: 800;
			}
		}
	}
	
	
	svg {
		width: 1em; 
		fill: var(--white);
	}
	
	
	
	.sitt {
		label {
			text-align: left;
			color: var(--grey);
			align-items: center;
			display: grid;
			grid-template-columns: 1fr max-content;
			grid-gap: 1em;
			padding: 1.6em 1.6em 1.6em 1.6em;
		}
		.number {
			color: var(--grey-black);
			@extend %user-select-none;
			span {
				cursor: pointer;
				display: inline-block;
				padding:.2em .4em;
				&:hover, &:active {
					color: var(--yellow);
				}
			}
		}
		input {
			width: 3em;
		}
		
	}
	input {
		border-radius: var(--border-radius);
		line-height: 2em;
		background-color: transparent;
		color: var(--white);
		border-bottom: 3px solid var(--light-black);
		text-align: center;
		&:focus {
			border-bottom: 3px solid var(--yellow);
			background: var(--light-black);
		}
		&::selection, &::-moz-selection { 
			background: var(--grey);
		}
	}
	
	.DIVrange {
		[for="range-slider"] {
			padding: 1.6em 1.6em 1.6em 1.6em;
			display: grid;
			grid-template-columns: 60% 30%;
			grid-template-areas: 'name range-slider' 'range range';
			grid-gap: 2em 1em;
			align-items: center;
			color: var(--grey);
			span {
				grid-area: name;
				text-align: left;
			}
			.range-slider__range {
				grid-area: range;
				-webkit-appearance: none;
				height: 2px;
				background: var(--grey-black);
				font-size: 15px;
				cursor: pointer;
				border-radius: 0;
				border: none;
				border-top: 6px solid var(--black);
				border-bottom: 6px solid var(--black);
				box-sizing: content-box;
				&::-webkit-slider-thumb, &::-moz-range-thumb {
					appearance: none;
					width: 1.2em;
					height: 1.2em;
					border-radius: 50%;
					background: var(--white);
					cursor: ew-resize;
					transition: background .15s ease-in-out;
					border: none;
					&:hover {
						background: var(--yellow);
						box-shadow: 0 0 8px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.3);
					}
				}
				&:active::-webkit-slider-thumb, &:active::-moz-range-thumb {
					background: var(--yellow);
				}
				&:focus {
					background: var(--yellow);
					cursor: ew-resize;
				}
			}
			.range-slider__value {
				grid-area: range-slider;
			}
		}
	}
	
	
	
	
	.toggle {
		display: grid;
		grid-template-columns: 1fr max-content;
		grid-gap: 1em;
		padding: 1.6em 1.6em 1.6em 1.6em;
		.switch {
			width: 2em;
			height: 1em;
			position: relative;
			display: inline-flex;
			border: 1px solid var(--grey-black);
			border-radius: var(--border-radius);
			margin: 0 .4em 0 .4em;
			box-sizing: border-box;
			input {
				width: 100%;
				height: 100%;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				filter: alpha(opacity=0);
				-moz-opacity: 0;
				opacity: 0;
				z-index: 100;
				position: absolute;
				cursor: pointer;
				& ~ i {
					display: block;
					position: absolute;
					height: 1.2em;
					width: 1.2em;
					left: -.2em;
					top: -.17em;
					z-index: 2;
					border-radius: 50%;
					background: var(--grey-black);
					transition: all .2s ease-out;
				}
				&:checked ~ i {
					left: calc(100% - 1em);
					background: var(--yellow);
				}
				&:disabled ~ i {
					background: var(--grey-black);
				}
			}
		}
	}
	
	
	#colorVal {
		border-top: 1px solid var(--light-black);
		padding: 1.6em 1.6em 1.6em 1.6em;
		input {
			margin-bottom: 1em;
			width: 100%;
		}
	}
	#ellipseVal {
		border-top: 1px solid var(--light-black);
	}
	#colorValPlus {
		cursor: pointer;
		color: var(--grey-black);
		padding: .2em .4em;
		&:hover, &:active {
			color: var(--yellow);
		}
	}
	.DIVgradient {
		border-top: 1px solid var(--light-black);
	}
}




#exclamationContent {
	position: absolute;
	min-width: 200px;
	max-width: 400px;
	background: var(--black);
	color: var(--white);
	border-radius: var(--border-radius);
	padding: 1.2em 2em 1em 1.2em;
	border: 1px solid var(--light-black);
	.exclamations {
		.exclamation-item {
			span {
				margin: .3em 0;
				display: inline-block;
				&:nth-child(1){
					margin: 0;
				}
				a {
					display: inline;
					color: var(--yellow);
					text-decoration: none;
					&:active, &:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
	
	.navigations {
		border-top: 1px solid var(--light-black);
		margin: 1.6em 0 0;
		padding: 1em 0 0;
		font-size: .8em;
		color: var(--grey);
		font-style: italic;
		span {
			cursor: pointer;
			padding: .4em .6em 0 0;
			&:active, &:hover {
				color: var(--yellow);
			}
		}
		.nextExclamation {
			background: var(--red);
			padding: .4em .6em;
			color: var(--white);
			border-radius: var(--border-radius);
			&:active, &:hover {
				background: var(--yellow);
				color: var(--white);
			}
		}
	}
	.arrow {
		position: absolute;
		top: .4em;
		right: -1em;
		background: var(--black);
		padding: .4em;
		line-height: 0;
		border-radius: 50%;
		border: 1px solid var(--white);
		width: 2em;
		height: 2em;
		svg {
			width: 1em;
			fill: var(--white);
		}
	}
}


.hidden {
	display: none;
}
              
            
!

JS

              
                (function(win) {
	class SVGing {
		constructor() {
			this.lineCSS = {
				'stroke': '#f06',
				'stroke-width': 0.5,
				'stroke-opacity': 1,
				'stroke-linecap': 'round',
				'stroke-linejoin': 'round',
				'cursor': this.getCursorMove(),
				'fill-rule': 'none',
			}; // Базовый стиль линий
			this.rectCSS = {
				'cursor': this.getCursorMove(),
				'fill': '#fff',
				'fill-opacity': .5,
				'stroke': '#000',
				'stroke-width': .5,
				'stroke-opacity': .025,
				'stroke-linecap': 'round',
				'stroke-linejoin': 'round',
			}; // стиль прямоугольника

			this.initEls();

			this.width = this.height = Math.max( this.els.svg.width(), this.els.svg.height() );
			this.draw = SVG('svg').size('100%', '100%').viewbox( 0, 0, this.width, this.height );
			this.group = this.draw.group().id('content'); // Контент
			this.gLines = this.draw.group().id('lines'); // Группа для линий
			this.gRemove; // Подложка
			this.lineS = []; // Пути
			this.reStartControl = 1; // 1 - поле пусто; 0 - уже что-то нарисовано
			this.US = {}; // Параметры
			this.Q = {nPath: 1, largeArcFlag: 1, gradientCashe: undefined}; // Для расчёта
			this.colorGroups = []; // Группы для элментов определённого цвета
			this.colors = []; // Шаблоны заливки
			this.scale = 1; // Масштаб

			this.init();
		}



		// начало

		init() {
			this.els.drow.on('click', () => this.drow());
			this.els.download.on('click', () => this.download());
			this.els.clear.on('click', () => this.clear());
			this.els.resetSittings.on('click', () => this.resetSittings());
			this.els.randomizer.on('click', () => this.randomizer());
			this.els.reset.on('click', () => this.reset());
			this.els.contain.on('click', () => this.contain());

			this.createGroupRemove();
			this.drow();
			this.group.add( this.gLines );
			this.resize( this.group );

			this.group.draggable().on('dragmove', (e) => {
				if (Math.round(this.group.x()) !== 0 || Math.round(this.group.y()) !== 0) {
					this.els.reset.css({display: 'block'});
					this.els.contain.css({display: 'block'});
				}
			})
		}



		// инициализация свойства this.els, содержащего интерфейсы

		initEls() {
			this.els = { // elements
				svg: $('#svg'),
				DIVrange: $('.DIVrange'),
				DIVvector: $('.DIVvector'),
				DIVgrow: $('.DIVgrow'),
				DIVdegrow: $('.DIVdegrow'),
				DIVrestart: $('.DIVrestart'),
				DIVsmoothie: $('.DIVsmoothie'),
				DIVpetals: $('.DIVpetals'),
				DIVcolor: $('.DIVcolor'),
				DIVround: $('.DIVround'),
				DIVvolna: $('.DIVvolna'),
				DIVgradient: $('.DIVgradient'),
				DIVwidth: $('.DIVwidth'),
				DIVradius: $('.DIVradius'),
				DIVgrouping: $('.DIVgrouping'),

				grow: $('#grow'),
				degrow: $('#degrow'),
				range: $('#range'),
				range_slider: $('.range-slider__value'),
				stVector: $('#vector'),
				restart: $('#restart'),
				smoothie: $('#smoothie'),
				petals: $('#petals'),
				color: $('#color'),
				volna: $('#volna'),
				round: $('#round'),
				gradient: $('#gradient'),
				width: $('#width'),
				grouping: $('#grouping'),
				reset: $('.reset'),
				contain: $('.contain'),
				progress: $('#progress'),
				drow: $('.action__drow'),
				radius: $('#radius'),
				rotation: $('#rotation'),
				colorVals: $('.colorVal'),
				colorVal: $('#colorVal'),
				colorValPlus: $('#colorValPlus'),
				clear: $('.action__clear'),
				resetSittings: $('.action__reset'),
				download: $('.action__download'),
				randomizer: $('.action__randomizer'),
			};
		}



		// вывот прогресса

		progress(t) {
			this.els.progress.text( t );
		}



		// перед отрисовкой

		beforeDrow() {
			this.els.drow.css({cursor:'wait'});
			this.els.drow.off('click');
			if(this.US.gradient && this.US.colorVal.length > 1){
				this.els.gradient.prop("disabled", true);
			};
		}



		// после отрисовки

		afterDrow()	{
			this.els.drow.css({cursor:''});
			this.els.drow.on('click', () => {
				this.drow()
			});
		}



		// отрисовка

		drow() {
			this.progress( '...' );
			this.beforeDrow();
			this.upSittings();

			this.createPath();
			this.progress( '..' );

			this.createColor();
			this.progress( '.' );

			this.createSvg();
			this.progress( '' );
			this.afterDrow()
		}



		// генерация кривых
		// Q.startX and Q.startY are coordinates end of lines
		// Q.dx and Q.dy are vectors
		// vX and vY are modified vectors
		// rX and rY are radii

		createPath(){
			let R1, R2, vX, vY, rX, rY, smoothie, radius, rotation, LAF, restart, v, line = '', T = this;

			T.US.smoothie == false ? smoothie = 1 : smoothie = -1;
			radius = T.US.radius
			LAF = T.Q.largeArcFlag;
			restart = T.US.restart || T.reStartControl;


			for (let i = 0, r = T.US.range; i < r; i++) {
				// -1 или 1
				R1 = T.rand_1AND1();

				T.US.volna ? R1 = 1 : null; 
				T.US.round ? R1 = -1 : null;

				// коэффициент изменение длины вектора
				R2 = T.rand_1AND2();


				if (i || (!i && !restart)) {
					// не первая иттерация или первая иттерация и узор продолжается

					vX = T.Q.dx * R2;
					vY = T.Q.dy * R2;

					R1 == -1 ? null : LAF = ~~!LAF;
					v = (LAF == 1 && (vX * vY < 0)) || (LAF == 0 && (vX * vY * smoothie > 0));

					if ( v ) {
						T.Q.dx = vX;
						T.Q.dy = vY * R1;
					} else {
						T.Q.dx = vX * R1;
						T.Q.dy = vY;
					}

					rX = rY = Math.abs( T.Q.dx );
				}


				if (!i) {
					// первая иттерация

					if (restart) {
						// узор рисуется с начала

						T.Q.dx = T.Q.dy = R1 * T.US.stVector;
						rX = rY = Math.abs( T.Q.dx );

						T.Q.startX = T.width / 2;
						T.Q.startY = T.height / 2;

						T.reStartControl = 0;
					} else {
						// узор продолжается
					}

					// Поворот дуги
					T.US.rotation ? T.Q.dx * T.Q.dy > 0 ? rotation = 45 : rotation = 135 : rotation = 45;

					rY = rY * radius;

					line = collectionLines(line, i, 
						M(T.Q.startX, T.Q.startY, rX, rY, rotation, LAF, T.Q.dx, T.Q.dy), 
						M(T.Q.startX, T.Q.startY, rX, rY, rotation, LAF, T.Q.dx, T.Q.dy)
					);

					T.Q.startX += T.Q.dx;
					T.Q.startY += T.Q.dy;
					T.Q.largeArcFlag = LAF;

					continue;
				}

				// Поворот дуги
				T.US.rotation ? T.Q.dx * T.Q.dy > 0 ? rotation = 45 : rotation = 135 : rotation = 45;
				T.US.petals ? T.Q.dy = vY * R1 : null;

				rY = rY * radius;

				line = collectionLines(line, i, 
					M(T.Q.startX, T.Q.startY, rX, rY, rotation, LAF, T.Q.dx, T.Q.dy), 
					a(rX, rY, rotation, LAF, T.Q.dx, T.Q.dy)
				);

				T.Q.startX += T.Q.dx;
				T.Q.startY += T.Q.dy;
				T.Q.largeArcFlag = LAF;
			}

			function M(startX, startY, rX, rY, rotation, largeArcFlag, dx, dy) {
				return `M${startX} ${startY} a${ a(rX, rY, rotation, largeArcFlag, dx, dy) }`;
			}
			function a(rX, rY, rotation, largeArcFlag, dx, dy) {
				return `${rX} ${rY} ${rotation} 0 ${largeArcFlag} ${dx} ${dy} `;
			}
			function collectionLines(line, i, M, a) {
				if (T.US.color) {
					// включён режим цветной линии
					T.lineS.push( M );
				} else {
					line += a;

					// это последняя иттерация
					i == T.US.range - 1 ? T.lineS.push( line ) : null;
				}

				return line;
			}
		}



		// создание шаблонов цветов

		createColor(){
			let T = this, gradient = T.US.gradient && T.US.color;

			// наполняем defs
			T.US.colorVal.forEach((e, i) => {
				let c = e.replace('#', '_');

				if ( !T.colors[c] ) {
					// создаём элемент, определённого цвета
					T.colors[c] = T.draw.gradient('linear', (stop) => {
						stop.at(0, e);
					}).id('G' + i);
				}
				
				if(T.US.grouping && !T.colorGroups[c] ){
					// создаём группу для элементов, определённого цвета
					T.colorGroups[c] = T.draw.group().id(c);
					T.gLines.add(T.colorGroups[c]);
				}

				if( gradient ){
					// иттеративно создаем различные градиенты
					createGradient(i, T.US.colorVal);
				}
			})


			// Создание всех возможных сочетаний градиентов с цветом "a"
			// a - index цвета
			// colorVal - this.US.colorVal

			function createGradient(a, colorVal) {
				let ai, ia;

				for(let i = a + 1; i < colorVal.length; i++){
					ai = (colorVal[a] + colorVal[i]).replace(/#/g, '_');
					ia = (colorVal[i] + colorVal[a]).replace(/#/g, '_');

					// создаём элементы, определённого градиента
					if ( !T.colors[ai] ) {
						T.colors[ai] = T.draw.gradient('linear', (stop) => {
							stop.at(0, colorVal[a])
							stop.at(1, colorVal[i])
						}).id('G' + a + i)
					}
					if ( !T.colors[ia] ) {
						T.colors[ia] = T.draw.gradient('linear', (stop) => {
							stop.at(0, colorVal[i])
							stop.at(1, colorVal[a])
						}).id('G' + i + a)
					}

					// создаём группы для элементов, определённого градиента
					if ( T.US.grouping ) {
						if( !T.colorGroups[ia] ){
							T.colorGroups[ia] = T.draw.group().id(ia);
							T.gLines.add(T.colorGroups[ia]);
						}
						if( !T.colorGroups[ai] ){
							T.colorGroups[ai] = T.draw.group().id(ai);
							T.gLines.add(T.colorGroups[ai]);
						}
					}
				}

				a++;
				a < colorVal.length ? createGradient(a, colorVal) : null;
			}
		}



		// окрашивание и публикация

		createSvg(){
			let T = this, stroke, nColorGroups, random, path;

			this.lineS.forEach((item, i, arr) => {
				// берём случайный цвет
				// номер цвета
				random = T.randomInteger(0, T.US.colorVal.length - 1);

				// id заливки
				stroke = 'G' + random;

				// номер группы цвета
				nColorGroups = T.US.colorVal[ random ];

				if(T.US.color && T.US.gradient){
					if(T.Q.gradientCashe == random || T.Q.gradientCashe == undefined){
						// предыдущий цвет равен новому или неопределённ (первый элемент)
					} else {
						// gradient
						// обновляем
						stroke = 'G' + T.Q.gradientCashe + random;
						nColorGroups = T.US.colorVal[ T.Q.gradientCashe ] + T.US.colorVal[ random ];
						

						if(item.split(' ')[7] < 0){
							// кривая направлена влево
							// обновляем
							stroke = 'G' + random + T.Q.gradientCashe;
							nColorGroups = T.US.colorVal[ random ] + T.US.colorVal[ T.Q.gradientCashe ];
						}
					}

					// запоминаем номер предыдущего цвета
					T.Q.gradientCashe = random;
				}

				// приводим к нужному виду
				nColorGroups = nColorGroups.replace(/#/g, '_');

				// публикуем
				T.lineCSS['stroke'] = `url(#${ stroke })`;
				path = T.draw.path(item).fill('none').attr(T.lineCSS).id('path_' + T.Q.nPath++);

				if (T.US.grouping) {
					// группировка включена
					T.colorGroups[ nColorGroups ].add(path);
				} else {
					T.gLines.add(path);
				}
			});

			this.lineS = [];
		}



		// сбор пользовательских параметров

		upSittings() {
			this.US.grow = +this.els.grow.val();
			this.US.degrow = +this.els.degrow.val();
			this.US.range = +this.els.range.val();
			this.US.stVector = +this.els.stVector.val();
			this.US.width = +this.els.width.val();
			this.US.radius = +this.els.radius.val();
			this.US.rotation = +this.els.rotation.prop("checked");
			this.US.restart = this.els.restart.prop("checked");
			this.US.smoothie = this.els.smoothie.prop("checked");
			this.US.petals = this.els.petals.prop("checked");
			this.US.color = this.els.color.prop("checked");
			this.US.volna = this.els.volna.prop("checked");
			this.US.round = this.els.round.prop("checked");
			this.US.gradient = this.els.gradient.prop("checked");
			this.US.grouping = this.els.grouping.prop("checked");

			this.lineCSS['stroke-width'] = this.US.width;
			this.US.colorVal = this.US.color ? this.getColor() : ['#f06'];
		}



		// блок для захвата и перемещения

		createGroupRemove() {
			let T = this;
			this.gRemove = this.draw.group().id('remove');
			this.group.add(this.gRemove);
			this.gRemove.back();
			this.gRemove.add(
				this.draw.rect(this.width, this.height).x(0).y(0).attr(this.rectCSS).id('background') 
			);

			[ [0, 0], [this.width, 0], [this.width, this.width], [0, this.width] ].forEach(function(e, i) {
				T.gRemove.add(
					T.draw.circle(T.width/60).center(e[0], e[1]).attr({
						fill: '#001', 
						cursor: T.getCursorMove()
					}).id('circle_' + i)
				);
			});
		}



		// масштабирование

		resize(el) {
			var scale, d;

			el.on('wheel', (e) => {
				scale = this.scale
				let a = this.draw.viewbox()
				
				var p = el.point(e.x, e.y)
				var b = el.rbox()
				var w2 = b.width / 2
				var h2 = b.height / 2
				var _ = el.point(b.cx, b.cy)
				var _x = (p.x - _.x) / w2
				var _y = (p.y - _.y) / h2

				if(scale < 0.4) { d = 0.01 }
					else if (scale < 1) { d = 0.05 }
						else if (scale < 3) { d = 0.1 }
							else if (scale < 5) { d = 0.2 }
								else if (scale < 10) { d = 0.4 }
									else if (scale < 20) { d = 0.7 }
										else if (scale < 50) { d = 1 }
											else if (scale < 100) { d = 4 }
												else if (scale < 200) { d = 7 }
													else { d = 10 }
				

				e.deltaY > 0 ? scale += d : scale -= d;
				scale <= 0.01 ? scale = 0.01 : scale = scale;
				scale = +scale.toFixed(3);

				el.scale( scale );
				this.scale = scale;
				
				var b2 = el.rbox()
				var ww = ((b.width - b2.width) / 2) * _x * scale
				var hh = ((b.height - b2.height) / 2) * _y * scale
				
				var t = this.group.transform()
				el.transform({ x: t.x + ww, y: t.y + hh})

				
				els.contain.css({display: 'block'});
				
				if (Math.round(el.x()) !== 0 || Math.round(el.y()) !== 0 || scale !== 1) {
					els.reset.css({display: 'block'})
				} else {
					els.reset.css({display: 'none'})
				}
			});
		}



		// отчистить холст

		clear() {
			this.gLines.each(function(i,elem) {
				this.remove()
			});
			$('linearGradient').remove();

			this.reStartControl = 1;
			this.Q.largeArcFlag = 1;
			this.colorGroups = [];
			this.colors = [];

			this.Q.nPath = 1;
			this.els.gradient.prop("disabled", false);
		}



		// сброс размера

		reset() {
			this.group.scale(1).x(0).y(0);
			this.scale = 1;
			this.els.reset.css({display: 'none'})
			this.els.contain.css({display: 'block'});
		}



		// вместить

		contain() {
			let a = this.draw.viewbox().width / Math.max(this.group.bbox().height, this.group.bbox().width);

			this.els.reset.css({display: 'block'});
			this.els.contain.css({display: 'none'});

			setTimeout(() => {
				this.group.scale( a );
				this.scale = a;
				
				setTimeout(() => {
					var B = this.group.bbox()
					var V = this.draw.viewbox()

					var w = -B.x * a + (V.width - B.width * a) / 2
					var h = -B.y * a + (V.height - B.height * a) / 2

					this.group.transform({ x: w, y: h})
				}, 0)
			}, 0)
		}



		// скачать SVG

		download() {
			var rbox = this.gLines.bbox(),
				sW = this.US.width,
				w = rbox.width + sW * 2,
				h = rbox.height + sW * 2,
				x = -rbox.x + sW,
				y = -rbox.y + sW,
				defs = this.draw.defs().id('defs').svg(),
				lines = this.gLines.x(x).y(y).svg(),
				svg = SVG('svg-download').size( w, h ).viewbox( 0, 0, w, h ).id('svg'),
				a = document.createElement('a'), xml, ev;

			this.gLines.x(0).y(0)
			svg.defs().remove()
			svg.svg( defs )
			svg.svg( lines )

			a.download = 'pattern.svg';
			a.href = 'data:application/octet-stream;base64,' + btoa( svg.svg() );

			ev = document.createEvent("MouseEvents");
			ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			a.dispatchEvent(ev);
			
			svg.remove()
		}



		// случайное число между min и max

		randomInteger(min, max) {
			var rand = min - 0.5 + Math.random() * (max - min + 1);
			return Math.round(rand);
		}



		// возвращает -1 или 1

		rand_1AND1() {
			return Math.random()*10 < 5 ? -1 : 1;
		}



		// коэффициенты изменения векторов

		rand_1AND2() {
			let g, d;

			g = +this.US.grow;
			d = +this.US.degrow;
			
			return Math.random() * 10 < 5 ? 1 - d/1000 : 1 + g/1000;
		}



		// получение цветов

		getColor() {
			let m = [], n;
			this.els.colorVals.each(function(indx, element){
				n = $(this).val();
				if(!n.match( /#[a-f0-9]{3}\b/gi ) && !n.match( /#[a-f0-9]{6}\b/gi )){
					$(this).remove();
				} else {
					m.push(n);
				}
			});
			return m;
		}




		// Курсор
		getCursorMove() {
			return `url("data:image/svg+xml;base64,${window.btoa('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="#001" d="M352.201 425.775l-79.196 79.196c-9.373 9.373-24.568 9.373-33.941 0l-79.196-79.196c-15.119-15.119-4.411-40.971 16.971-40.97h51.162L228 284H127.196v51.162c0 21.382-25.851 32.09-40.971 16.971L7.029 272.937c-9.373-9.373-9.373-24.569 0-33.941L86.225 159.8c15.119-15.119 40.971-4.411 40.971 16.971V228H228V127.196h-51.23c-21.382 0-32.09-25.851-16.971-40.971l79.196-79.196c9.373-9.373 24.568-9.373 33.941 0l79.196 79.196c15.119 15.119 4.411 40.971-16.971 40.971h-51.162V228h100.804v-51.162c0-21.382 25.851-32.09 40.97-16.971l79.196 79.196c9.373 9.373 9.373 24.569 0 33.941L425.773 352.2c-15.119 15.119-40.971 4.411-40.97-16.971V284H284v100.804h51.23c21.382 0 32.09 25.851 16.971 40.971z"></path></svg>')}"), auto`;
		}





		resetSittings(){
			this.updateSittings({
				range: 120,
				stVector: 8,
				width: 1,
				grow: 0,
				degrow: 0,
				radius: 1,
				round: false,
				smoothie: false,
				petals: false,
				volna: false,
				color: false,
				volna: false,
				gradient: false,
				rotation: true,
				restart: false,
				grouping: false,
			})
		}




		updateSittings(s){
			for (let key in s) if (typeof s[key] === "function") s[key] = s[key]()

			els.smoothie.prop("checked") != s.smoothie ? els.smoothie.click() : false;
			els.petals.prop("checked") != s.petals ? els.petals.click() : false;
			els.color.prop("checked") != s.color ? els.color.click() : false;
			els.volna.prop("checked") != s.volna ? els.volna.click() : false;
			els.round.prop("checked") != s.round ? els.round.click() : false;
			els.gradient.prop("checked") != s.gradient ? els.gradient.click() : false;
			els.rotation.prop("checked") != s.rotation ? els.rotation.click() : false;

			if (s.restart !== undefined) els.restart.prop("checked") != s.restart ? els.restart.click() : false;
			if (s.grouping !== undefined) els.grouping.prop("checked") != s.grouping ? els.grouping.click() : false;

			els.grow.val( s.grow ).trigger("input");
			els.degrow.val( s.degrow ).trigger("input");
			els.range.val( s.range ).trigger("input");
			els.stVector.val( s.stVector ).trigger("input");
			els.width.val( s.width ).trigger("input");
			els.radius.val( s.radius ).trigger("input");
		}




		/* Радомайзер */

		randomizer() {
			this.clear();
			
			var randomSittings = [
				{
					range: () => this.randomInteger(500, 4000),
					stVector: () => this.randomInteger(8, 50),
					width: () => this.randomInteger(1, 50),
					grow: 0,
					degrow: 0,
					radius: () => this.randomInteger(0, 5),
					round: false,
					smoothie: false,
					petals: false,
					volna: false,
					color: false,
					volna: false,
					gradient: false,
					rotation: true
				},
				{
					range: () => this.randomInteger(500, 4000),
					stVector: () => this.randomInteger(8, 50),
					width: () => this.randomInteger(1, 5),
					grow: () => this.randomInteger(5, 10),
					degrow: () => this.randomInteger(0, 5),
					radius: 1,
					round: false,
					smoothie: false,
					petals: false,
					volna: false,
					color: false,
					volna: false,
					gradient: false,
					rotation: true
				},
				{
					range: () => this.randomInteger(500, 4000),
					stVector: () => this.randomInteger(8, 20),
					width: 1,
					grow: 0,
					degrow: 0,
					radius: () => this.randomInteger(0, 5),
					round: false,
					smoothie: false,
					petals: false,
					volna: false,
					color: false,
					volna: false,
					gradient: false,
					rotation: true
				},
				{
					range: () => this.randomInteger(500, 4000),
					stVector: () => this.randomInteger(8, 20),
					width: 1,
					grow: 0,
					degrow: 0,
					radius: 1,
					round: false,
					smoothie: false,
					petals: false,
					volna: false,
					color: true,
					volna: false,
					gradient: true,
					rotation: true
				},
				{
					range: () => this.randomInteger(500, 4000),
					stVector: () => this.randomInteger(8, 20),
					width: () => this.randomInteger(1, 20),
					grow: 0,
					degrow: 0,
					radius: () => this.randomInteger(0, 3),
					round: false,
					smoothie: false,
					petals: false,
					volna: false,
					color: true,
					volna: false,
					gradient: true,
					rotation: true
				},
				{
					range: () => this.randomInteger(1000, 6000),
					stVector: 8,
					width: 1,
					grow: () => this.randomInteger(7, 9),
					degrow: () => this.randomInteger(4, 7),
					radius: 1,
					round: true,
					smoothie: false,
					petals: false,
					volna: false,
					color: true,
					volna: false,
					gradient: true,
					rotation: true
				},
				{
					range: () => this.randomInteger(1000, 6000),
					stVector: 8,
					width: 1,
					grow: () => this.randomInteger(7, 9),
					degrow: () => this.randomInteger(4, 7),
					radius: () => this.randomInteger(0, 5),
					round: true,
					smoothie: false,
					petals: false,
					volna: false,
					color: true,
					volna: false,
					gradient: false,
					rotation: true
				},
				{
					range: () => this.randomInteger(2000, 4000),
					stVector: 8,
					width: 1,
					grow: 0,
					degrow: 0,
					radius: () => this.randomInteger(0, 5),
					round: false,
					smoothie: true,
					petals: false,
					volna: false,
					color: false,
					volna: false,
					gradient: false,
					rotation: true
				},
				{
					range: () => this.randomInteger(2000, 4000),
					stVector: 8,
					width: 1,
					grow: 0,
					degrow: 0,
					radius: () => this.randomInteger(0, 5),
					round: false,
					smoothie: false,
					petals: true,
					volna: false,
					color: false,
					volna: false,
					gradient: false,
					rotation: () => this.rand_1AND1() === 1 ? true : false
				}
			];
			
			this.updateSittings(randomSittings[ this.randomInteger(0, randomSittings.length-1) ])
			setTimeout(() => this.drow(), 500);
		}
	}


	let drow = new SVGing();
	let els = drow.els;










	/* Интерфейс */

	// настройки числовых полей

	function addEventNumberInput(input, DIV, sittings) {
		input.on("input keydown wheel", (e) => {
			changeNamber(e, (e) => {
				var v = inputChangeNamber.call(e, sittings)
				e.target.value = v
			})
		});
		
		DIV.find(".number-control").on("click", sittings, number_minus_plus);
	}

	addEventNumberInput(els.degrow.add(els.grow), els.DIVgrow.add(els.DIVdegrow), {
		min: 0,
		max: 500,
	})

	addEventNumberInput(els.stVector, els.DIVvector, {
		min: 1,
		max: 99,
	})

	addEventNumberInput(els.width, els.DIVwidth, {
		min: 1,
		max: 999,
	})

	addEventNumberInput(els.radius, els.DIVradius, {
		min: 0,
		max: 5,
		fraction: true
	})




	// Настройка переключателей

	// бонус 2
	els.petals.change(function() {
		if(els.smoothie.prop("checked")){
			if(!els.round.prop("checked")) {
				els.grow.val(0).trigger("input");;
				els.degrow.val(0).trigger("input");;

				$([els.volna, els.smoothie]).prop("checked", false);
				Toggle([els.DIVvolna, els.DIVsmoothie], true)
			}
		} else {
			if(!els.round.prop("checked")) {
				Toggle([els.DIVvolna, els.DIVsmoothie], false)
			}
		}
	});

	// бонус
	els.smoothie.change(function() {
		let els = drow.els;
		if(els.smoothie.prop("checked")){
			els.grow.val(0).trigger("input");;
			els.degrow.val(0).trigger("input");;

			$([els.volna, els.round, els.petals]).prop("checked", false);
			Toggle([els.DIVvolna, els.DIVround, els.DIVpetals], true)
		} else {
			Toggle([els.DIVvolna, els.DIVround, els.DIVpetals], false)
		}
	});

	// волна
	els.volna.change(() => { 
		if(els.volna.prop("checked")){
			els.range.attr( 'max', 5000 );
			els.range.val(2000).trigger("input");

			$([els.smoothie, els.round, els.petals]).prop("checked", false);
			Toggle([els.DIVsmoothie, els.DIVround, els.DIVpetals], true)
		} else {
			Toggle([els.DIVsmoothie, els.DIVround, els.DIVpetals], false)
		}
	});

	// кручение
	els.round.change(() => {
		if(els.round.prop("checked")){
			if(!els.petals.prop("checked")) {
				$([els.smoothie, els.volna]).prop("checked", false);
				Toggle([els.DIVsmoothie, els.DIVvolna], true)
			}
			
			drow.US.grow < 1 ? els.grow.val(10) : false;
			if((drow.US.grow && drow.US.degrow) < 1) {
				els.grow.val(10).trigger("input");;
				els.degrow.val(8).trigger("input");;
			}
			if(drow.US.range < 3500){
				els.range.attr( 'max', 10000 );
				els.range.val(5000).trigger("input");
			}
		} else {
			els.range.attr( 'max', 5000 );
			els.range.val(2000).trigger("input");

			if(!els.petals.prop("checked")) {
				Toggle([els.DIVsmoothie, els.DIVvolna], false)
			}
		}
	});


	// переключатель
	// в зависимости от параметра log показываем или скрывам argument
	function Toggle(argument, log) {
		if (!log) {
			$(argument).each(function(indx, element){
				$(this).slideDown("slow");
			})
		} else {
			$(argument).each(function(indx, element){
				$(this).slideUp("slow");
			})
		}
	}






	// При изменении el показываем или скрываем target
	function slideDown_and_slideUp(target, el) { // Работа с полями для цветов    
		el.change(() => { 
			el.prop("checked") ? target.slideDown("slow") : target.slideUp("slow"); 
		});
	};




	// Работа с цветом
	addColor("#f06");
	addColor("#001");
	els.colorValPlus.on('click', () => addColor());
	slideDown_and_slideUp($([els.colorVal[0], els.colorValPlus[0], els.DIVgradient[0]]), els.color);


	// Добавдение цвета
	function addColor(val = '#') {
		var input = $('<input>', {
			type: 'text',
			class: 'colorVal',
			value: val,
			on: {
				keyup: function(e){ 
					var t = $(this);

					if(t.val() == '' && e.which == 8){
						t.remove()
						els.colorVals = $('.colorVal')
						els.colorVals[ els.colorVals.length -1 ].focus()
					}
					if(e.which == 13){
						addColor()
					}
				},
			}
		});

		els.colorValPlus.before( input )
		els.colorVals = $('.colorVal')
		input.focus()
	}





	(function() { // Number Q

		var range = $('.range-slider__range'),
			value = $('.range-slider__value');

		value.val(range.val());

		range.on('input', (e) => {
			value.val( e.target.value );
		});
		
		value.on('input keydown wheel', (e) => {
			changeNamber(e, (e) => {
				var v = inputChangeNamber.call(e, {
					min: 1,
					max: 4000,
					fraction: false
				})
				e.target.value = v
				range[0].value = v;
			})
		});

	})();
	
	
	
	// Debounce function's
	function debounce(fn, timeout, invokeAsap, ctx) {

		if(arguments.length == 3 && typeof invokeAsap != 'boolean') {
			ctx = invokeAsap;
			invokeAsap = false;
		}

		var timer;

		return function() {

			var args = arguments;
					ctx = ctx || this;

			invokeAsap && !timer && fn.apply(ctx, args);

			clearTimeout(timer);

			timer = setTimeout(function() {
				!invokeAsap && fn.apply(ctx, args);
				timer = null;
			}, timeout);

		};
	}
	
	
	
	
	// Извлечение deltaY
	function getDeltaEvent(e) {
		return e.originalEvent.deltaY || e.originalEvent.detail || e.originalEvent.wheelDelta
	}




	// Обшая функция для обработки событий (input, keydown, wheel) на полях
	// e: event, fun: функция обработчик
	function changeNamber(e, fun) {
		if (e.type === "input") {
			debounce(() => fun(e), 700)()
		} else if (e.type === "keydown" && (e.keyCode == 38 || e.keyCode == 40)) {
			fun(e)
		} else if (e.type === "wheel") {
			fun(e)
			stopWheel(e)
		}
	}

	// Расчёт нового значения параметра
	// data: min, max, fraction, fractionWheel
	// this: event
	// return number
	function inputChangeNamber(data) {
		let v = +/([0-9.]*)/i.exec(this.target.value)[1];
		let fraction = data.fraction ? data.fraction : 0, 
				decimal = 1 / 10 ** fraction;
		let fractionWheel = data.fractionWheel ? data.fractionWheel : 0, 
				decimalWheel = 1 / 10 ** fractionWheel;

		if (this.type === "input") {
			if (data.fraction) {
				v = v || data.min;
			} else {
				v = parseInt(v || data.min);
				v = +v.toFixed(fraction);
			}
		} else if (this.type === "keydown") {
			if (this.keyCode == '38') {
				v += decimal;
			} else if (this.keyCode == '40') {
				v -= decimal;
			}
		} else if (this.type === "wheel") {
			let delta = getDeltaEvent(this);
			if (delta < 0) {
				v += decimalWheel;
			} else if (delta > 0) {
				v -= decimalWheel;
			}
		}

		// Округление/исправление
		if (this.type === "keydown" || this.type === "input") {
			v = +v.toFixed(fraction);
		} else if (this.type === "wheel") {
			v = +v.toFixed(fractionWheel);
		}

		// убираем лишние нули
		if ((v ^ 0) === v) v = ~~v;

		// Контроль диапазона
		v > data.max ? v = data.max : v;
		v < data.min ? v = data.min : v;

		return v
	}

	// Блокирует прокрутку страницы на элементе
	// e: event
	function stopWheel(e) {
		var target = e.target,
			delta = getDeltaEvent(e);

		if (delta < 0 && target.scrollTop == 0) {
			e.preventDefault();
		}

		if (delta > 0 && target.scrollHeight - target.clientHeight - target.scrollTop <= 1) {
			e.preventDefault();
		}
	}

	// Обработчик для кнопок + и - возле полей
	// e: event
	// e.data: min, max, fraction
	function number_minus_plus(e) {
		let input = $(this).closest('.number').find('input'),
			v = +input.val(),
			p = 1, data = e.data;

		if (data.fraction) { p = 0.1; };

		if ($(this).hasClass('nc-minus')) { v = v - p; }
		if ($(this).hasClass('nc-plus')) { v = v + p; }

		if (data.fraction) { v = v.toFixed(1); } else { v = v.toFixed(0); }

		v > data.max ? v = data.max : v;
		v < data.min ? v = data.min : v;

		input.val(v);
		e.preventDefault();
	}




	/* Презентация */


	(function() {
		var exclamation = $('.exclamation');
		var exclamations = $('.exclamation-item');
		var exclamationContent = $('#exclamationContent');
		var nextExclamation = $('.nextExclamation');
		var exit = $('.exit');
		var backward = $('.backward');
		var spanNavigations = $(".navigations span");
		var arrow = $(".arrow");

		var Exclamation = {
			offset: undefined, n: 0, height: undefined, 

			offsetData: function() {
				let outerWidth = els.DIVrange.outerWidth()
				let height = Math.max(els.svg.width(), els.svg.height());

				this.offset = [
					{
						right: height / 2,
						top: '25%'
					},
					{
						right: height + outerWidth - els.download.offset().left - els.download.outerWidth() + 32 + 18,
						top: els.download.offset().top + els.download.outerHeight() + 16
					},
					{
						right: height + outerWidth - els.randomizer.offset().left + 32 + 18,
						top: els.randomizer.offset().top
					},
					{
						right: height + outerWidth - els.drow.offset().left + 32 + 18,
						top: els.drow.offset().top
					},
					{
						right: height + outerWidth - els.clear.offset().left + 32 + 18,
						top: els.clear.offset().top
					},
					{
						right: height + outerWidth - els.download.offset().left + 32 + 18,
						top: els.download.offset().top
					},
					{
						right: height / 2,
						top: '25%'
					}
				];
			},
			
			
			start: function() {
				this.offsetData()
				
				exclamationContent.css({
					right: this.offset[this.n].right, 
					top: this.offset[this.n].top, 
					display: 'block'
				});

				$(exclamations[this.n]).removeClass('hidden').fadeIn(0);
				exclamation.off('click').on('click', () => { this.exitAll() });
				backward.addClass('hidden');

				$('body').on("keydown", (e) => this.keydown(e));
			},

			exitAll: function() {
				this.offsetData()
				this.n = 0;

				exclamationContent.fadeOut(300);
				exclamation.off('click').on('click', () => { this.start() });
				arrow.addClass('hidden');

				setTimeout(() => {
					spanNavigations.removeClass('hidden');
					exclamations.addClass('hidden').fadeOut(0);
				}, 300)

				$('body').off("keydown");
			},
			
			backward: function() {
				this.offsetData()
				this.n -= 1;

				$(exclamations[this.n+1]).slideUp("slow");
				$(exclamations[this.n]).slideDown("slow");

				exclamationContent.animate({ 
					right:this.offset[this.n].right, 
					top:this.offset[this.n].top 
				}, 600);

				if(this.n == 0) {
					arrow.addClass('hidden')
					backward.addClass('hidden')
				} else {
					arrow.removeClass('hidden')
					spanNavigations.removeClass('hidden')
				}
			},
			
			nextExclamation: function() {
				this.offsetData()
				this.n += 1;
				
				$(exclamations[this.n-1]).slideUp("slow");
				$(exclamations[this.n]).slideDown("slow");

				exclamationContent.animate({ 
					right:this.offset[this.n].right, 
					top:this.offset[this.n].top 
				}, 600);

				if(this.n == exclamations.length - 1) {
					arrow.addClass('hidden')
					nextExclamation.addClass('hidden')
				} else {
					arrow.removeClass('hidden')
					spanNavigations.removeClass('hidden')
				}
			},

			keydown: function(e) {
				if (e.keyCode == "37") {
					if (this.n != 0) {
						e.preventDefault(); 
						this.backward();
					}
				} else if (e.keyCode == "39") {
					if (this.n != exclamations.length - 1) {
						e.preventDefault(); 
						this.nextExclamation();
					}
				}
			}
		};


		exclamation.on('click', () => { Exclamation.start() });
		exit.on('click', () => { Exclamation.exitAll() });
		backward.on('click', () => { Exclamation.backward() });
		nextExclamation.on('click', () => { Exclamation.nextExclamation() });
	})();

})(window);
              
            
!
999px

Console