me/p2p-rendering-computation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Squashed 'artwork/' content from commit 21e1ad5

Browse Source 
git-subtree-dir: artwork
git-subtree-split: 21e1ad52df667d8dfefd7840dcbe514fc955845b
This commit is contained in:
Gaurav Gosain
2022-12-01 13:03:05 +04:00
commit 002235cf00
3 changed files with 115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.md Normal file
View File

@@ -0,0 +1,16 @@
# p2prc_logo
## Pure HTML Version of the p2prc Logo :)
![p2prc Logo](https://user-images.githubusercontent.com/55647468/204634868-07e94b6d-65f5-4446-a11f-7a14f11edff9.png)
> Note: To change the size of the logo simply edit the CSS variable of `--size` under the `style` tag!
---
### Embedding the HTML as a `foreignObject` element inside an SVG directly
![](embed.svg)

46
embed.svg Normal file
View File

@@ -0,0 +1,46 @@
<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="800" height="800">
<div xmlns="http://www.w3.org/1999/xhtml">
<style>
:root {
--size: 8;
}
.bg {
width: calc(var(--size)*100px);
height: calc(var(--size)*100px);
background: linear-gradient(90deg,
rgb(254, 188, 80) 30%,
rgb(235, 162, 118) 50%,
rgb(255, 97, 69) 70%);
-webkit-mask-size: calc(var(--size)*100px) calc(var(--size)*100px);
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZTdReFVvNjhGTlMxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+DQogICAgPGc+DQogICAgICAgIDxsaW5lIHgxPSItMzIuNSIgeTE9Ii0xMy41IiB4Mj0iMzIuNSIgeTI9IjEzLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Mi41IDI1MS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTE3LjI1IiB5MT0iMjMuNzUiIHgyPSIxNy4yNSIgeTI9Ii0yMy43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA3Ljc1IDI4OC43NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iLTE3LjUiIHgyPSIyNC41IiB5Mj0iMTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ5LjUgMjgyLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjQuNSIgeTE9IjI1LjUiIHgyPSIyNC41IiB5Mj0iLTI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0OS41IDIzOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTMzLjI1IiB5MT0iLTE2LjI1IiB4Mj0iMzMuMjUiIHkyPSIxNi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLjc1IDE5Ny4zMTAyNDkpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMTMiIHkxPSIyNyIgeDI9IjEzIiB5Mj0iLTI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODYuMTIwNDk4IDE4NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNTc4NyINCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yMy43NSIgeTE9Ii0xOC44NzUiIHgyPSIyMy43NSIgeTI9IjE4Ljg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIyLjg3MDQ5OSAxNzguODc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTAuNSIgeTE9Ii00MC4zNzUiIHgyPSIwLjUiIHkyPSI0MC4zNzUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OCAyMzguMTI1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iMzcuMjUiIHkxPSIzMi4yNSIgeDI9Ii0zNy4yNSIgeTI9Ii0zMi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzExLjI1IDI0Ni4yNSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9IjM2Ljc1IiB5MT0iLTExLjI1IiB4Mj0iLTM2Ljc1IiB5Mj0iMTEuMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMC43NSAyODguNzUpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjEuMjUiIHkxPSItMTguMjUiIHgyPSIyMS4yNSIgeTI9IjE4LjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjkuNzUgMjk1Ljc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTIxLjUiIHkxPSItMTUuMTI1IiB4Mj0iMjEuNSIgeTI9IjE1LjEyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY5LjUgMjEyLjg3NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iMTYuNSIgeDI9IjI0LjUiIHkyPSItMTYuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE1LjUgMjExLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjMuMjUiIHkxPSItMjQuNzUiIHgyPSIyMy4yNSIgeTI9IjI0Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MTQuMjUgMjUyLjc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgIDwvZz4NCiAgICA8Zz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDcuNSAxODEuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCAxNjApIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxMCIgcnk9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAgMjM4KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTQiIHJ5PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0IDIxNCkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDcuNSAxOTcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCAxOTUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIyMCIgcnk9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUgMjY1KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTguNSIgcnk9IjE4LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OC41IDI3OC41KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iNy41IiByeT0iNy41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzcuNSAyNzcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjUgMzEyLjUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxNCIgcnk9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzQgMjk5KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iOSIgcnk9IjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5MSAzMTQpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgPC9nPg0KPC9zdmc+");
mask-size: calc(var(--size)*100px) calc(var(--size)*100px);
mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZTdReFVvNjhGTlMxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+DQogICAgPGc+DQogICAgICAgIDxsaW5lIHgxPSItMzIuNSIgeTE9Ii0xMy41IiB4Mj0iMzIuNSIgeTI9IjEzLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Mi41IDI1MS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTE3LjI1IiB5MT0iMjMuNzUiIHgyPSIxNy4yNSIgeTI9Ii0yMy43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA3Ljc1IDI4OC43NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iLTE3LjUiIHgyPSIyNC41IiB5Mj0iMTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ5LjUgMjgyLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjQuNSIgeTE9IjI1LjUiIHgyPSIyNC41IiB5Mj0iLTI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0OS41IDIzOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTMzLjI1IiB5MT0iLTE2LjI1IiB4Mj0iMzMuMjUiIHkyPSIxNi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLjc1IDE5Ny4zMTAyNDkpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMTMiIHkxPSIyNyIgeDI9IjEzIiB5Mj0iLTI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODYuMTIwNDk4IDE4NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNTc4NyINCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yMy43NSIgeTE9Ii0xOC44NzUiIHgyPSIyMy43NSIgeTI9IjE4Ljg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIyLjg3MDQ5OSAxNzguODc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTAuNSIgeTE9Ii00MC4zNzUiIHgyPSIwLjUiIHkyPSI0MC4zNzUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OCAyMzguMTI1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iMzcuMjUiIHkxPSIzMi4yNSIgeDI9Ii0zNy4yNSIgeTI9Ii0zMi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzExLjI1IDI0Ni4yNSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9IjM2Ljc1IiB5MT0iLTExLjI1IiB4Mj0iLTM2Ljc1IiB5Mj0iMTEuMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMC43NSAyODguNzUpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjEuMjUiIHkxPSItMTguMjUiIHgyPSIyMS4yNSIgeTI9IjE4LjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjkuNzUgMjk1Ljc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTIxLjUiIHkxPSItMTUuMTI1IiB4Mj0iMjEuNSIgeTI9IjE1LjEyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY5LjUgMjEyLjg3NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iMTYuNSIgeDI9IjI0LjUiIHkyPSItMTYuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE1LjUgMjExLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjMuMjUiIHkxPSItMjQuNzUiIHgyPSIyMy4yNSIgeTI9IjI0Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MTQuMjUgMjUyLjc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgIDwvZz4NCiAgICA8Zz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDcuNSAxODEuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCAxNjApIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxMCIgcnk9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAgMjM4KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTQiIHJ5PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0IDIxNCkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDcuNSAxOTcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCAxOTUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIyMCIgcnk9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUgMjY1KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTguNSIgcnk9IjE4LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OC41IDI3OC41KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iNy41IiByeT0iNy41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzcuNSAyNzcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjUgMzEyLjUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxNCIgcnk9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzQgMjk5KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iOSIgcnk9IjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5MSAzMTQpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgPC9nPg0KPC9zdmc+");
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.p2prc {
position: fixed;
top: 63%;
font-size: calc((var(--size) * 100px)/8);
font-weight: 700;
font-family: sans-serif;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="logo">
<div class="bg"></div>
<div class="p2prc">p2prc</div>
</div>
</div>
</foreignObject>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

53
index.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>p2prc</title>
</head>
<body>
<style>
:root {
--size: 8;
}
.bg {
width: calc(var(--size)*100px);
height: calc(var(--size)*100px);
background: linear-gradient(
90deg,
rgb(254,188,80) 30%,
rgb(235,162,118) 50%,
rgb(255,97,69) 70%
);
-webkit-mask-size: calc(var(--size)*100px) calc(var(--size)*100px);
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZTdReFVvNjhGTlMxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+DQogICAgPGc+DQogICAgICAgIDxsaW5lIHgxPSItMzIuNSIgeTE9Ii0xMy41IiB4Mj0iMzIuNSIgeTI9IjEzLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Mi41IDI1MS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTE3LjI1IiB5MT0iMjMuNzUiIHgyPSIxNy4yNSIgeTI9Ii0yMy43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA3Ljc1IDI4OC43NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iLTE3LjUiIHgyPSIyNC41IiB5Mj0iMTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ5LjUgMjgyLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjQuNSIgeTE9IjI1LjUiIHgyPSIyNC41IiB5Mj0iLTI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0OS41IDIzOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTMzLjI1IiB5MT0iLTE2LjI1IiB4Mj0iMzMuMjUiIHkyPSIxNi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLjc1IDE5Ny4zMTAyNDkpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMTMiIHkxPSIyNyIgeDI9IjEzIiB5Mj0iLTI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODYuMTIwNDk4IDE4NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNTc4NyINCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yMy43NSIgeTE9Ii0xOC44NzUiIHgyPSIyMy43NSIgeTI9IjE4Ljg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIyLjg3MDQ5OSAxNzguODc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTAuNSIgeTE9Ii00MC4zNzUiIHgyPSIwLjUiIHkyPSI0MC4zNzUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OCAyMzguMTI1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iMzcuMjUiIHkxPSIzMi4yNSIgeDI9Ii0zNy4yNSIgeTI9Ii0zMi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzExLjI1IDI0Ni4yNSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9IjM2Ljc1IiB5MT0iLTExLjI1IiB4Mj0iLTM2Ljc1IiB5Mj0iMTEuMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMC43NSAyODguNzUpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjEuMjUiIHkxPSItMTguMjUiIHgyPSIyMS4yNSIgeTI9IjE4LjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjkuNzUgMjk1Ljc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTIxLjUiIHkxPSItMTUuMTI1IiB4Mj0iMjEuNSIgeTI9IjE1LjEyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY5LjUgMjEyLjg3NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iMTYuNSIgeDI9IjI0LjUiIHkyPSItMTYuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE1LjUgMjExLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjMuMjUiIHkxPSItMjQuNzUiIHgyPSIyMy4yNSIgeTI9IjI0Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MTQuMjUgMjUyLjc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgIDwvZz4NCiAgICA8Zz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDcuNSAxODEuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCAxNjApIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxMCIgcnk9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAgMjM4KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTQiIHJ5PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0IDIxNCkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDcuNSAxOTcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCAxOTUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIyMCIgcnk9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUgMjY1KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTguNSIgcnk9IjE4LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OC41IDI3OC41KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iNy41IiByeT0iNy41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzcuNSAyNzcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjUgMzEyLjUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxNCIgcnk9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzQgMjk5KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iOSIgcnk9IjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5MSAzMTQpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgPC9nPg0KPC9zdmc+");
mask-size: calc(var(--size)*100px) calc(var(--size)*100px);
mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZTdReFVvNjhGTlMxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+DQogICAgPGc+DQogICAgICAgIDxsaW5lIHgxPSItMzIuNSIgeTE9Ii0xMy41IiB4Mj0iMzIuNSIgeTI9IjEzLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Mi41IDI1MS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTE3LjI1IiB5MT0iMjMuNzUiIHgyPSIxNy4yNSIgeTI9Ii0yMy43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA3Ljc1IDI4OC43NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iLTE3LjUiIHgyPSIyNC41IiB5Mj0iMTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ5LjUgMjgyLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjQuNSIgeTE9IjI1LjUiIHgyPSIyNC41IiB5Mj0iLTI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0OS41IDIzOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTMzLjI1IiB5MT0iLTE2LjI1IiB4Mj0iMzMuMjUiIHkyPSIxNi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLjc1IDE5Ny4zMTAyNDkpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMTMiIHkxPSIyNyIgeDI9IjEzIiB5Mj0iLTI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODYuMTIwNDk4IDE4NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNTc4NyINCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yMy43NSIgeTE9Ii0xOC44NzUiIHgyPSIyMy43NSIgeTI9IjE4Ljg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIyLjg3MDQ5OSAxNzguODc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTAuNSIgeTE9Ii00MC4zNzUiIHgyPSIwLjUiIHkyPSI0MC4zNzUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OCAyMzguMTI1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iMzcuMjUiIHkxPSIzMi4yNSIgeDI9Ii0zNy4yNSIgeTI9Ii0zMi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzExLjI1IDI0Ni4yNSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9IjM2Ljc1IiB5MT0iLTExLjI1IiB4Mj0iLTM2Ljc1IiB5Mj0iMTEuMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMC43NSAyODguNzUpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjEuMjUiIHkxPSItMTguMjUiIHgyPSIyMS4yNSIgeTI9IjE4LjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjkuNzUgMjk1Ljc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTIxLjUiIHkxPSItMTUuMTI1IiB4Mj0iMjEuNSIgeTI9IjE1LjEyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY5LjUgMjEyLjg3NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iMTYuNSIgeDI9IjI0LjUiIHkyPSItMTYuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE1LjUgMjExLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjMuMjUiIHkxPSItMjQuNzUiIHgyPSIyMy4yNSIgeTI9IjI0Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MTQuMjUgMjUyLjc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgIDwvZz4NCiAgICA8Zz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDcuNSAxODEuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCAxNjApIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxMCIgcnk9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAgMjM4KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTQiIHJ5PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0IDIxNCkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDcuNSAxOTcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCAxOTUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIyMCIgcnk9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUgMjY1KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTguNSIgcnk9IjE4LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OC41IDI3OC41KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iNy41IiByeT0iNy41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzcuNSAyNzcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjUgMzEyLjUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxNCIgcnk9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzQgMjk5KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iOSIgcnk9IjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5MSAzMTQpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgPC9nPg0KPC9zdmc+");
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 4px solid black;
border-radius: 2em;
}
.p2prc {
position: fixed;
top: 63%;
font-size: calc((var(--size) * 100px)/8);
font-weight: 700;
font-family: sans-serif;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="logo">
<div class="bg"></div>
<div class="p2prc">p2prc</div>
</div>
</div>
</body>
</html>