<div data-js="polygon" data-preview-image="https://assets.stoumann.dk/img/polygon1.jpg" data-preview-images="https://assets.stoumann.dk/img/1px.gif,https://assets.stoumann.dk/img/polygon1.jpg,https://assets.stoumann.dk/img/polygon2.jpg,https://assets.stoumann.dk/img/polygon3.jpg,https://assets.stoumann.dk/img/polygon4.jpg">
</div>
/*
The CSS for this is external.
*/
const elements = document.querySelectorAll('[data-js="polygon"]');
			if (elements.length) {
				import('https://assets.stoumann.dk/js/app-polygon.mjs')
				.then(module => {
					const jsClass = module.default;
					elements.forEach(element => {
						new jsClass(element, element.dataset, presets);
					});
				})
			}

		/* Default presets for localhost demo / or when REST API fails */
		const presets = [
		{
			"name": "big savings!",
			"value": "polygon(50% 0%, 54.02% 5.36%, 58.93% 0.80%, 61.92% 6.80%, 67.57% 3.19%, 69.45% 9.62%, 75.64% 7.08%, 76.34% 13.74%, 82.90% 12.35%, 82.39% 19.03%, 89.09% 18.83%, 87.40% 25.31%, 94.03% 26.31%, 91.21% 32.39%, 97.55% 34.55%, 93.70% 40.03%, 99.55% 43.29%, 94.77% 47.99%, 99.95% 52.24%, 94.41% 56.02%, 98.75% 61.13%, 92.63% 63.85%, 95.98% 69.65%, 89.47% 71.24%, 91.73% 77.54%, 85.04% 77.94%, 86.14% 84.55%, 79.49% 83.75%, 79.39% 90.45%, 72.99% 88.47%, 71.69% 95.05%, 65.75% 91.96%, 63.30% 98.20%, 58% 94.10%, 54.48% 99.80%, 50% 94.82%, 45.52% 99.80%, 42% 94.10%, 36.70% 98.20%, 34.25% 91.96%, 28.31% 95.05%, 27.01% 88.47%, 20.61% 90.45%, 20.51% 83.75%, 13.86% 84.55%, 14.96% 77.94%, 8.27% 77.54%, 10.53% 71.24%, 4.02% 69.65%, 7.37% 63.85%, 1.25% 61.13%, 5.59% 56.02%, 0.05% 52.24%, 5.23% 47.99%, 0.45% 43.29%, 6.30% 40.03%, 2.45% 34.55%, 8.79% 32.39%, 5.97% 26.31%, 12.60% 25.31%, 10.91% 18.83%, 17.61% 19.03%, 17.10% 12.35%, 23.66% 13.74%, 24.36% 7.08%, 30.55% 9.62%, 32.43% 3.19%, 38.08% 6.80%, 41.07% 0.80%, 45.98% 5.36%)",
			"values": [
				{
					"animationinset": 25,
					"color": "rgba(255,15,227,1)",
					"inset": 10,
					"sides": 35
				}
			]
		},
		{
			"name": "point of no return",
			"value": "polygon(50% 0%, 50.07725424859374% 49.51223587092621%, 65.45084971874738% 2.447174185242325%, 50.224200561666855% 49.55998162233247%, 79.38926261462366% 9.54915028125263%, 50.349200561666855% 49.650799438333145%, 90.45084971874738% 20.610737385376343%, 50.44001837766753% 49.775799438333145%, 97.55282581475768% 34.54915028125263%, 50.48776412907379% 49.92274575140626%, 100% 50%, 50.48776412907379% 50.07725424859374%, 97.55282581475768% 65.45084971874736%, 50.44001837766753% 50.224200561666855%, 90.45084971874738% 79.38926261462366%, 50.349200561666855% 50.349200561666855%, 79.38926261462366% 90.45084971874738%, 50.224200561666855% 50.44001837766753%, 65.45084971874738% 97.55282581475768%, 50.07725424859374% 50.48776412907379%, 50% 100%, 49.92274575140626% 50.48776412907379%, 34.549150281252636% 97.55282581475768%, 49.775799438333145% 50.44001837766753%, 20.61073738537635% 90.45084971874738%, 49.650799438333145% 50.349200561666855%, 9.549150281252636% 79.38926261462366%, 49.55998162233247% 50.224200561666855%, 2.447174185242325% 65.45084971874738%, 49.51223587092621% 50.07725424859374%, 0% 50.00000000000001%, 49.51223587092621% 49.92274575140626%, 2.447174185242318% 34.549150281252636%, 49.55998162233247% 49.775799438333145%, 9.54915028125263% 20.61073738537635%, 49.650799438333145% 49.650799438333145%, 20.61073738537634% 9.549150281252636%, 49.775799438333145% 49.55998162233247%, 34.54915028125262% 2.447174185242325%, 49.92274575140626% 49.51223587092621%)",
			"values": [
				{
					"animationinset": 1,
					"color": "rgba(231,20,255,1)",
					"inset": 99,
					"sides": 20
				}
			]
		},
		{
			"name": "mercedes",
			"value": "polygon(50% 0%, 56.50% 46.25%, 93.30% 75%, 50% 57.50%, 6.70% 75%, 43.50% 46.25%)",
			"values": [
				{
					"animationinset": 1,
					"color": "rgba(163,167,168,1)",
					"inset": 70,
					"sides": 3
				}
			]
		},
		{
			"name": "sunny hectogon",
			"value": "polygon(50% 0%, 51.57% 0.05%, 53.14% 0.10%, 54.70% 0.25%, 56.27% 0.39%, 57.82% 0.64%, 59.37% 0.89%, 60.90% 1.23%, 62.43% 1.57%, 63.94% 2.01%, 65.45% 2.45%, 66.93% 2.98%, 68.41% 3.51%, 69.85% 4.13%, 71.29% 4.76%, 72.69% 5.47%, 74.09% 6.18%, 75.44% 6.98%, 76.79% 7.78%, 78.09% 8.67%, 79.39% 9.55%, 80.63% 10.51%, 81.87% 11.47%, 83.05% 12.51%, 84.23% 13.55%, 85.34% 14.66%, 86.45% 15.77%, 87.49% 16.95%, 88.53% 18.13%, 89.49% 19.37%, 90.45% 20.61%, 91.33% 21.91%, 92.22% 23.21%, 93.02% 24.56%, 93.82% 25.91%, 94.53% 27.31%, 95.24% 28.71%, 95.87% 30.15%, 96.49% 31.59%, 97.02% 33.07%, 97.55% 34.55%, 97.99% 36.06%, 98.43% 37.57%, 98.77% 39.10%, 99.11% 40.63%, 99.36% 42.18%, 99.61% 43.73%, 99.75% 45.30%, 99.90% 46.86%, 99.95% 48.43%, 100% 50%, 99.95% 51.57%, 99.90% 53.14%, 99.75% 54.70%, 99.61% 56.27%, 99.36% 57.82%, 99.11% 59.37%, 98.77% 60.90%, 98.43% 62.43%, 97.99% 63.94%, 97.55% 65.45%, 97.02% 66.93%, 96.49% 68.41%, 95.87% 69.85%, 95.24% 71.29%, 94.53% 72.69%, 93.82% 74.09%, 93.02% 75.44%, 92.22% 76.79%, 91.33% 78.09%, 90.45% 79.39%, 89.49% 80.63%, 88.53% 81.87%, 87.49% 83.05%, 86.45% 84.23%, 85.34% 85.34%, 84.23% 86.45%, 83.05% 87.49%, 81.87% 88.53%, 80.63% 89.49%, 79.39% 90.45%, 78.09% 91.33%, 76.79% 92.22%, 75.44% 93.02%, 74.09% 93.82%, 72.69% 94.53%, 71.29% 95.24%, 69.85% 95.87%, 68.41% 96.49%, 66.93% 97.02%, 65.45% 97.55%, 63.94% 97.99%, 62.43% 98.43%, 60.90% 98.77%, 59.37% 99.11%, 57.82% 99.36%, 56.27% 99.61%, 54.70% 99.75%, 53.14% 99.90%, 51.57% 99.95%, 50% 100%, 48.43% 99.95%, 46.86% 99.90%, 45.30% 99.75%, 43.73% 99.61%, 42.18% 99.36%, 40.63% 99.11%, 39.10% 98.77%, 37.57% 98.43%, 36.06% 97.99%, 34.55% 97.55%, 33.07% 97.02%, 31.59% 96.49%, 30.15% 95.87%, 28.71% 95.24%, 27.31% 94.53%, 25.91% 93.82%, 24.56% 93.02%, 23.21% 92.22%, 21.91% 91.33%, 20.61% 90.45%, 19.37% 89.49%, 18.13% 88.53%, 16.95% 87.49%, 15.77% 86.45%, 14.66% 85.34%, 13.55% 84.23%, 12.51% 83.05%, 11.47% 81.87%, 10.51% 80.63%, 9.55% 79.39%, 8.67% 78.09%, 7.78% 76.79%, 6.98% 75.44%, 6.18% 74.09%, 5.47% 72.69%, 4.76% 71.29%, 4.13% 69.85%, 3.51% 68.41%, 2.98% 66.93%, 2.45% 65.45%, 2.01% 63.94%, 1.57% 62.43%, 1.23% 60.90%, 0.89% 59.37%, 0.64% 57.82%, 0.39% 56.27%, 0.25% 54.70%, 0.10% 53.14%, 0.05% 51.57%, 0% 50%, 0.05% 48.43%, 0.10% 46.86%, 0.25% 45.30%, 0.39% 43.73%, 0.64% 42.18%, 0.89% 40.63%, 1.23% 39.10%, 1.57% 37.57%, 2.01% 36.06%, 2.45% 34.55%, 2.98% 33.07%, 3.51% 31.59%, 4.13% 30.15%, 4.76% 28.71%, 5.47% 27.31%, 6.18% 25.91%, 6.98% 24.56%, 7.78% 23.21%, 8.67% 21.91%, 9.55% 20.61%, 10.51% 19.37%, 11.47% 18.13%, 12.51% 16.95%, 13.55% 15.77%, 14.66% 14.66%, 15.77% 13.55%, 16.95% 12.51%, 18.13% 11.47%, 19.37% 10.51%, 20.61% 9.55%, 21.91% 8.67%, 23.21% 7.78%, 24.56% 6.98%, 25.91% 6.18%, 27.31% 5.47%, 28.71% 4.76%, 30.15% 4.13%, 31.59% 3.51%, 33.07% 2.98%, 34.55% 2.45%, 36.06% 2.01%, 37.57% 1.57%, 39.10% 1.23%, 40.63% 0.89%, 42.18% 0.64%, 43.73% 0.39%, 45.30% 0.25%, 46.86% 0.10%, 48.43% 0.05%)",
			"values": [
				{
					"animationinset": 60,
					"color": "rgba(255,201,77,1)",
					"inset": 0,
					"sides": 100
				}
			]
		},
		{
			"name": "hexagon star",
			"value": "polygon(50% 0%, 71.65% 12.50%, 93.30% 25%, 93.30% 50%, 93.30% 75%, 71.65% 87.50%, 50% 100%, 28.35% 87.50%, 6.70% 75%, 6.70% 50%, 6.70% 25%, 28.35% 12.50%)",
			"values": [
				{
					"animationinset": 35,
					"color": "rgba(255,77,77,1)",
					"inset": 0,
					"sides": 6
				}
			]
		}
		]
Run Pen

External CSS

  1. https://assets.stoumann.dk/css/app-polygon.css

External JavaScript

This Pen doesn't use any external JavaScript resources.