Change bg shapes to SVGs and add more complex shapes
This commit is contained in:
@ -5,14 +5,39 @@
|
||||
let ctx: CanvasRenderingContext2D;
|
||||
|
||||
let dark_theme = false;
|
||||
let time_scale = 1;
|
||||
|
||||
let particlesArray: Array<Particle> = [];
|
||||
let gradientsArray: Array<Gradient> = [];
|
||||
|
||||
let particleImages = {
|
||||
// This is horrible code
|
||||
circle: {} as HTMLImageElement,
|
||||
square: {} as HTMLImageElement,
|
||||
triangle: {} as HTMLImageElement,
|
||||
star: {} as HTMLImageElement,
|
||||
wavyCircle: {} as HTMLImageElement,
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
canvas = document.getElementById("bg-canvas") as HTMLCanvasElement;
|
||||
ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||
|
||||
particleImages.circle = new Image() as HTMLImageElement;
|
||||
particleImages.circle.src = "/img/bg-shapes/circle.svg";
|
||||
|
||||
particleImages.square = new Image() as HTMLImageElement;
|
||||
particleImages.square.src = "/img/bg-shapes/square.svg";
|
||||
|
||||
particleImages.triangle = new Image() as HTMLImageElement;
|
||||
particleImages.triangle.src = "/img/bg-shapes/triangle.svg";
|
||||
|
||||
particleImages.star = new Image() as HTMLImageElement;
|
||||
particleImages.star.src = "/img/bg-shapes/star.svg";
|
||||
|
||||
particleImages.wavyCircle = new Image() as HTMLImageElement;
|
||||
particleImages.wavyCircle.src = "/img/bg-shapes/wavy-circle.svg";
|
||||
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
@ -47,24 +72,20 @@
|
||||
class Entity {
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
originalSize: number;
|
||||
speedX: number;
|
||||
speedY: number;
|
||||
growthSpeed: number;
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = (Math.random() * 5 + 1) * 1.5;
|
||||
this.originalSize = this.size;
|
||||
this.speedX = (Math.random() - 0.5) * 0.2;
|
||||
this.speedX = (Math.random() - 0.5) * 0.2; // -0.1 to 0.1
|
||||
this.speedY = (Math.random() - 0.5) * 0.2;
|
||||
this.growthSpeed = Math.random() * 0.02 + 0.01;
|
||||
this.growthSpeed = Math.random() * 0.02 + 0.01; // 0.01 to 0.03
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
this.x += this.speedX * time_scale;
|
||||
this.y += this.speedY * time_scale;
|
||||
|
||||
// Reverse direction if particle hits edge
|
||||
if (this.x <= 0 || this.x >= canvas.width) {
|
||||
@ -75,55 +96,11 @@
|
||||
this.speedY = -this.speedY;
|
||||
}
|
||||
this.y = clamp(0, this.y, canvas.height);
|
||||
|
||||
// Breathing effect: oscillate size
|
||||
this.size += this.growthSpeed;
|
||||
if (
|
||||
this.size >= this.originalSize * 1.5 ||
|
||||
this.size <= this.originalSize * 0.5
|
||||
) {
|
||||
this.growthSpeed = -this.growthSpeed; // Reverse growth direction
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function roundRect(
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
radius: number,
|
||||
) {
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + width - radius, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||||
ctx.lineTo(x + width, y + height - radius);
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
||||
ctx.lineTo(x + radius, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||
}
|
||||
|
||||
function roundTriangle(size: number, radius: number) {
|
||||
const x1 = 0,
|
||||
y1 = 0;
|
||||
const x2 = size,
|
||||
y2 = 0;
|
||||
const x3 = size / 2,
|
||||
y3 = size / 1.375;
|
||||
const midX1 = (x1 + x2) / 2;
|
||||
const midY1 = (y1 + y2) / 2;
|
||||
const midX2 = (x2 + x3) / 2;
|
||||
const midY2 = (y2 + y3) / 2;
|
||||
const midX3 = (x3 + x1) / 2;
|
||||
const midY3 = (y3 + y1) / 2;
|
||||
ctx.arcTo(x2, y2, midX2, midY2, radius);
|
||||
ctx.arcTo(x3, y3, midX3, midY3, radius);
|
||||
ctx.arcTo(x1, y1, midX1, midY1, radius);
|
||||
}
|
||||
|
||||
class Shape {
|
||||
// Reference implementation for Shape
|
||||
draw(angle: number, size: number) {
|
||||
return;
|
||||
}
|
||||
@ -131,27 +108,35 @@
|
||||
|
||||
class Circle extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
|
||||
ctx.closePath();
|
||||
ctx.drawImage(particleImages.circle, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
class Square extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
roundRect(-size / 2, -size / 2, size, size, size / 5);
|
||||
ctx.closePath();
|
||||
ctx.drawImage(particleImages.square, -size / 2, -size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
class Triangle extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
roundTriangle(size * 2, size / 5);
|
||||
ctx.closePath();
|
||||
ctx.drawImage(particleImages.triangle, -size / 2, -size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
class Star extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
ctx.drawImage(particleImages.star, -size / 2, -size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
class WaveyCircle extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
ctx.drawImage(particleImages.wavyCircle, -size / 2, -size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -159,57 +144,87 @@
|
||||
shape: Shape;
|
||||
angle: number;
|
||||
rotationSpeed: number;
|
||||
size: number;
|
||||
originalSize: number;
|
||||
constructor() {
|
||||
super();
|
||||
this.shape = new [Circle, Square, Triangle][
|
||||
Math.floor(Math.random() * 3)
|
||||
this.shape = new [Circle, Square, Triangle, Star, WaveyCircle][
|
||||
Math.floor(Math.random() * 5)
|
||||
](); // A very strange but effective way to pick a random shape
|
||||
this.angle = Math.random() * 360;
|
||||
this.rotationSpeed = Math.random() * 2 - 1;
|
||||
this.rotationSpeed = Math.random() * 2 - 1; // -1 to 1
|
||||
this.originalSize = Math.random() * 8 + 8; // 8 to 16
|
||||
this.size = this.originalSize;
|
||||
}
|
||||
|
||||
update() {
|
||||
super.update();
|
||||
this.angle += this.rotationSpeed;
|
||||
this.angle += this.rotationSpeed * time_scale;
|
||||
|
||||
// Breathing effect: oscillate size
|
||||
this.size += this.growthSpeed * time_scale;
|
||||
if (
|
||||
this.size >= this.originalSize * 1.25 ||
|
||||
this.size <= this.originalSize * 0.75
|
||||
) {
|
||||
this.growthSpeed = -this.growthSpeed; // Reverse growth direction
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = dark_theme ? "#333" : "#bbb";
|
||||
ctx.save();
|
||||
// The source images are black, so we are inverting them
|
||||
// different amounts to get different shades of gray
|
||||
ctx.filter = dark_theme ? "invert(0.25)" : "invert(0.75)";
|
||||
ctx.translate(this.x, this.y);
|
||||
ctx.scale(this.size / 10, this.size / 10);
|
||||
this.shape.draw(this.angle, this.size);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function getRandomColor() {
|
||||
if (dark_theme) {
|
||||
const r = Math.floor(Math.random() * 255 - 100);
|
||||
const b = Math.floor(Math.random() * 255 - 100);
|
||||
const g = Math.floor(Math.random() * 255 - 100);
|
||||
let r = Math.floor(Math.random() * 255 - 100);
|
||||
let b = Math.floor(Math.random() * 255 - 100);
|
||||
let g = Math.floor(Math.random() * 255 - 100);
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
} else {
|
||||
const r = Math.floor(Math.random() * 100 + 155);
|
||||
const g = Math.floor(Math.random() * 100 + 155);
|
||||
const b = Math.floor(Math.random() * 100 + 155);
|
||||
let r = Math.floor(Math.random() * 100 + 155);
|
||||
let g = Math.floor(Math.random() * 100 + 155);
|
||||
let b = Math.floor(Math.random() * 100 + 155);
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
}
|
||||
|
||||
class Gradient extends Entity {
|
||||
originalRadius: number;
|
||||
radius: number;
|
||||
color: string;
|
||||
alpha: number;
|
||||
dAlpha: number;
|
||||
constructor() {
|
||||
super();
|
||||
this.radius = Math.random() * 500 + 300;
|
||||
this.originalRadius = Math.random() * 500 + 300;
|
||||
this.radius = this.originalRadius;
|
||||
this.color = getRandomColor();
|
||||
this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
|
||||
this.dAlpha = (Math.random() - 0.5) * 0.01;
|
||||
}
|
||||
|
||||
update() {
|
||||
super.update();
|
||||
|
||||
// Breathing effect: oscillate size
|
||||
this.radius += this.growthSpeed * time_scale;
|
||||
if (
|
||||
this.radius >= this.originalRadius * 1.1 ||
|
||||
this.radius <= this.originalRadius * 0.9
|
||||
) {
|
||||
this.growthSpeed = -this.growthSpeed; // Reverse growth direction
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
const gradient = ctx.createRadialGradient(
|
||||
this.x,
|
||||
@ -225,20 +240,20 @@
|
||||
} else {
|
||||
gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
|
||||
}
|
||||
|
||||
ctx.save();
|
||||
ctx.globalAlpha = this.alpha;
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
particlesArray = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
particlesArray.push(new Particle());
|
||||
}
|
||||
gradientsArray = [];
|
||||
|
||||
48
static/img/bg-shapes/circle.svg
Normal file
48
static/img/bg-shapes/circle.svg
Normal file
@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="circle.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="5.9860924"
|
||||
inkscape:cx="28.14858"
|
||||
inkscape:cy="23.805179"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0529166"
|
||||
id="path1"
|
||||
cx="1.3229166"
|
||||
cy="1.3229166"
|
||||
r="1.3229166" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
50
static/img/bg-shapes/square.svg
Normal file
50
static/img/bg-shapes/square.svg
Normal file
@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="square.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="5.9860924"
|
||||
inkscape:cx="28.232107"
|
||||
inkscape:cy="23.805179"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0529166"
|
||||
id="rect1"
|
||||
width="2.6458333"
|
||||
height="2.6458333"
|
||||
x="0"
|
||||
y="0"
|
||||
ry="0.42333332" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
96
static/img/bg-shapes/star.svg
Normal file
96
static/img/bg-shapes/star.svg
Normal file
@ -0,0 +1,96 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="star.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="40.911253"
|
||||
inkscape:cx="6.1474529"
|
||||
inkscape:cy="6.0741234"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect3"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
|
||||
radius="8"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
|
||||
radius="8"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
id="path2"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="4"
|
||||
sodipodi:cx="6.614583"
|
||||
sodipodi:cy="6.614583"
|
||||
sodipodi:r1="6.6176233"
|
||||
sodipodi:r2="2.301954"
|
||||
sodipodi:arg1="-0.029738439"
|
||||
sodipodi:arg2="0.75565972"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 11.23738,7.1337824 10.28189,7.4772235 A 4.1661509,4.1661509 133.29611 0 0 7.6936896,10.224128 L 7.4076518,11.198344 A 0.6904665,0.6904665 178.29611 0 1 6.0953836,11.23738 L 5.7519425,10.28189 A 4.1661509,4.1661509 43.296113 0 0 3.0050377,7.6936896 L 2.0308224,7.4076518 A 0.6904665,0.6904665 88.296113 0 1 1.9917861,6.0953836 l 0.95549,-0.3434411 A 4.1661509,4.1661509 133.29611 0 0 5.5354765,3.0050377 L 5.8215142,2.0308224 a 0.6904665,0.6904665 178.29611 0 1 1.3122682,-0.039036 l 0.3434411,0.95549 a 4.1661509,4.1661509 43.296113 0 0 2.7469045,2.5882004 l 0.974216,0.2860377 a 0.6904665,0.6904665 88.296113 0 1 0.03904,1.3122682 z"
|
||||
inkscape:transform-center-x="-0.014052847"
|
||||
inkscape:transform-center-y="-0.068859274"
|
||||
inkscape:path-effect="#path-effect3"
|
||||
transform="matrix(0.26043146,0,0,0.25804465,-0.39972889,-0.39606549)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
68
static/img/bg-shapes/triangle.svg
Normal file
68
static/img/bg-shapes/triangle.svg
Normal file
@ -0,0 +1,68 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="triangle.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="18.89041"
|
||||
inkscape:cx="8.9198698"
|
||||
inkscape:cy="10.243293"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
|
||||
radius="8"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
d="M 2.1166666,13.229167 H 11.1125 a 1.2220542,1.2220542 119.99992 0 0 1.058329,-1.833084 L 7.6729215,3.6055279 a 1.2220656,1.2220656 180 0 0 -2.1166765,0 L 1.0583382,11.396083 a 1.2220543,1.2220543 60.000077 0 0 1.0583284,1.833084 z"
|
||||
id="path2"
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:path-effect="#path-effect2"
|
||||
inkscape:original-d="M 0,13.229167 H 13.229167 L 6.6145832,1.7724437 Z"
|
||||
transform="matrix(0.23128026,0,0,0.23128026,-0.20690571,-0.55319007)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
93
static/img/bg-shapes/wavy-circle.svg
Normal file
93
static/img/bg-shapes/wavy-circle.svg
Normal file
@ -0,0 +1,93 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="wavy-circle.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="46.528727"
|
||||
inkscape:cx="5.0398972"
|
||||
inkscape:cy="5.3945168"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect3"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1"
|
||||
radius="6"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
|
||||
radius="8"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="path1"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="8"
|
||||
sodipodi:cx="6.614583"
|
||||
sodipodi:cy="6.614583"
|
||||
sodipodi:r1="6.6146464"
|
||||
sodipodi:r2="5.3311768"
|
||||
sodipodi:arg1="-1.5707963"
|
||||
sodipodi:arg2="-1.1780972"
|
||||
inkscape:rounded="0.4"
|
||||
inkscape:randomized="0"
|
||||
d="M 6.6145832,-6.3419342e-5 C 7.6740846,-6.3390953e-5 7.6758845,1.2837643 8.6547362,1.689218 9.6335879,2.0946717 10.542664,1.1881411 11.291844,1.9373218 c 0.749181,0.7491807 -0.157349,1.6582566 0.248104,2.6371083 0.405454,0.9788517 1.689281,0.9806516 1.689281,2.0401531 0,1.0595014 -1.283827,1.0613013 -1.689281,2.040153 -0.405454,0.9788517 0.501077,1.8879278 -0.248104,2.6371078 -0.74918,0.749181 -1.6582564,-0.157349 -2.6371081,0.248104 -0.9788517,0.405454 -0.9806516,1.689281 -2.0401531,1.689281 -1.0595014,0 -1.0613012,-1.283827 -2.0401529,-1.689281 C 3.5955782,11.134494 2.6865022,12.041025 1.9373215,11.291844 1.1881409,10.542664 2.0946715,9.6335876 1.6892179,8.6547359 1.2837642,7.6758842 -6.3447731e-5,7.6740843 -6.3419342e-5,6.6145828 -6.3390953e-5,5.5550814 1.2837643,5.5532816 1.689218,4.5744299 2.0946717,3.5955782 1.1881411,2.6865022 1.9373218,1.9373215 2.6865025,1.1881409 3.5955784,2.0946715 4.5744301,1.6892179 5.5532818,1.2837642 5.5550817,-6.3447731e-5 6.6145832,-6.3419342e-5 Z"
|
||||
transform="matrix(0.20000288,0,0,0.20000288,-5.0735291e-5,1.2684051e-5)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
Reference in New Issue
Block a user