rotten77/svg-waves-generator.py

## svg-waves-generator.py
# see in action: https://codepen.io/rotten77/pen/GRyZopJ

import math
import random

def smooth_array(input_array, output_length):

	import numpy as np

	points = np.arange(len(input_array))
	values = np.array(input_array)
	x = np.linspace(0, len(input_array)-1, num=output_length)
	output_array = np.interp(x, points, values)

	return output_array

scale = 6
resolution = 600
offset = 18
color = '#000'
width = '2px'

waves = [
	[0, 5, 7, 6 , 8, 0],
	[0, 5, 2, 0, -3, 0],
	[0, 1, -7, -10, -12, 0],
	[0, -2, -8, -16, -24, 0],
	[0, -5, -12, -28, -30, 0],
	[0, -5, -18, -32, -36, 0],
	[0, -5, -12, -28, -30, 0],
	[0, 1, -4, -12, -24, 0],
	[0, 1, 2, -3, -10, 0],
	[0, 2, 1, 0, -2, 0],
	[0, 3, 4, 2, 2, 0],
	[0, 5, 7, 6 , 8, 0],
	[0, 2, 3, 1 , -1, 0],
	[0, -14, -8, -3 , -2, 0],
	[0, -18, -9, -4 , -3, 0],
	[0, -7, -2, -1 , 1, 0],
	[0, 1, 3, 4 , 7, 0],
	[0, 5, 7, 6 , 8, 0],
]

path_result = ""
max_y = 0
offset_current = math.ceil(offset/2)
for wave in waves:
	path = []
	y_values = smooth_array(wave, resolution)
	y_prev = 0

	for i in range(0, resolution):
		half_scale = math.ceil(scale/2)
		wave_scale = random.randint(-1*half_scale, half_scale)
		y = offset_current + wave_scale + round(y_values[i])
		if y == y_prev:
			y = y - wave_scale
		path.append(f'{("M" if i == 0 else "L")} {i} {y}')
		y_prev = y
		if y>max_y:
			max_y = y

	print()

	path_result += f'\n  <path d="{" ".join(path)}" stroke="{color}" stroke-width="{width}" fill="none" vector-effect="non-scaling-stroke" />'
	offset_current += offset


result = """
<html>
<style>
html, body {
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;}
body {
	background-color: #000;
}

@keyframes wave_fadeout {
	from {stroke: #fff}
	to {stroke: #888}
}
svg {
	position:fixed;
	top:0;
	left:0;
	overflow:hidden;
	width:100%;
  height:100%;
	overflow:hidden;
	z-index:10;

}
path {
  stroke: #888;
  width:100%;
}
path:hover {
  stroke: #fff
}
path:not(:hover) {
  animation-name: wave_fadeout;
  animation-duration: 2s;
}
</style>
<body>
"""

result += f'\n<svg viewBox="0 0 {resolution} {math.ceil(max_y/offset)*offset}" preserveAspectRatio="none">'


result +=path_result

result += '\n</svg></body></html>'

file = open("waves.html", "w+")
file.write(result)
file.close()
	# see in action: https://codepen.io/rotten77/pen/GRyZopJ

	import math
	import random

	def smooth_array(input_array, output_length):

	import numpy as np

	points = np.arange(len(input_array))
	values = np.array(input_array)
	x = np.linspace(0, len(input_array)-1, num=output_length)
	output_array = np.interp(x, points, values)

	return output_array

	scale = 6
	resolution = 600
	offset = 18
	color = '#000'
	width = '2px'

	waves = [
	[0, 5, 7, 6 , 8, 0],
	[0, 5, 2, 0, -3, 0],
	[0, 1, -7, -10, -12, 0],
	[0, -2, -8, -16, -24, 0],
	[0, -5, -12, -28, -30, 0],
	[0, -5, -18, -32, -36, 0],
	[0, -5, -12, -28, -30, 0],
	[0, 1, -4, -12, -24, 0],
	[0, 1, 2, -3, -10, 0],
	[0, 2, 1, 0, -2, 0],
	[0, 3, 4, 2, 2, 0],
	[0, 5, 7, 6 , 8, 0],
	[0, 2, 3, 1 , -1, 0],
	[0, -14, -8, -3 , -2, 0],
	[0, -18, -9, -4 , -3, 0],
	[0, -7, -2, -1 , 1, 0],
	[0, 1, 3, 4 , 7, 0],
	[0, 5, 7, 6 , 8, 0],
	]

	path_result = ""
	max_y = 0
	offset_current = math.ceil(offset/2)
	for wave in waves:
	path = []
	y_values = smooth_array(wave, resolution)
	y_prev = 0

	for i in range(0, resolution):
	half_scale = math.ceil(scale/2)
	wave_scale = random.randint(-1*half_scale, half_scale)
	y = offset_current + wave_scale + round(y_values[i])
	if y == y_prev:
	y = y - wave_scale
	path.append(f'{("M" if i == 0 else "L")} {i} {y}')
	y_prev = y
	if y>max_y:
	max_y = y

	print()

	path_result += f'\n <path d="{" ".join(path)}" stroke="{color}" stroke-width="{width}" fill="none" vector-effect="non-scaling-stroke" />'
	offset_current += offset


	result = """
	<html>
	<style>
	html, body {
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;}
	body {
	background-color: #000;
	}

	@keyframes wave_fadeout {
	from {stroke: #fff}
	to {stroke: #888}
	}
	svg {
	position:fixed;
	top:0;
	left:0;
	overflow:hidden;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:10;

	}
	path {
	stroke: #888;
	width:100%;
	}
	path:hover {
	stroke: #fff
	}
	path:not(:hover) {
	animation-name: wave_fadeout;
	animation-duration: 2s;
	}
	</style>
	<body>
	"""

	result += f'\n<svg viewBox="0 0 {resolution} {math.ceil(max_y/offset)*offset}" preserveAspectRatio="none">'



	result +=path_result

	result += '\n</svg></body></html>'

	file = open("waves.html", "w+")
	file.write(result)
	file.close()