up
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
|
||||
<rect width="200" height="200" fill="#ffffff"/>
|
||||
<rect id="pot1" x="70" y="160" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="70;70;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="160;160;180;180"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="40;40;0;0"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="40;40;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="20;20;0;0"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="20;20;0;0"/>
|
||||
</rect>
|
||||
<rect id="pot2" x="150" y="130" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="160;150;150;185;185"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="150;130;130;165;165"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="0;40;40;0;0"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="0;40;40;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="0;20;20;0;0"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="0;20;20;0;0"/>
|
||||
</rect>
|
||||
<rect id="pot3" x="70" y="50" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="70;90;70;70;70"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="50;70;50;50;160"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="0;0;40;40;40"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="0;0;40;40;40"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="0;0;20;20;20"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="0;0;20;20;20"/>
|
||||
</rect>
|
||||
<rect id="line1" x="132" y="60" width="14" height="120" rx="7" ry="7" fill="#33BEFF" transform="rotate(-45 139 120)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="132;152;132;132;132;132"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="60;160;60;60;60;60"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="0;0;120;120;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line2" x="105" y="105" width="14" height="80" rx="7" ry="7" fill="#33BEFF" transform="rotate(30 112 145)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="105;100;105;105;120;120"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="105;160;105;105;115;115"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="0;0;80;80;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line3" x="45" y="80" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(45 52 105)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="45;90;45;45;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="80;70;80;80;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line4" x="30" y="45" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(90 37 70)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="30;90;30;30;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="45;70;45;45;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line5" x="43" y="8" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(135 50 33)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="43;90;43;43;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="8;70;8;8;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line6" x="81" y="-8" width="14" height="50" rx="7" ry="7" fill="#B1B1B1">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="81;90;81;81;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="-8;70;-8;-8;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line7" x="120" y="6" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(45 127 31)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="120;90;120;120;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="6;70;6;6;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line8" x="135" y="45" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(90 142 70)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="135;90;135;135;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="45;70;45;45;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.9 KiB |
@@ -0,0 +1,92 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
|
||||
<rect width="200" height="200" fill="#ffffff"/>
|
||||
<rect id="pot1" x="70" y="160" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="70;70;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="160;160;180;180"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="40;40;0;0"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="40;40;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="20;20;0;0"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="20;20;0;0"/>
|
||||
</rect>
|
||||
<rect id="pot2" x="150" y="130" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="160;150;150;185;185"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="150;130;130;165;165"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;40;40;0;0"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;40;40;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;20;20;0;0"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;20;20;0;0"/>
|
||||
</rect>
|
||||
<rect id="pot3" x="70" y="50" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="70;90;70;70;70"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="50;70;50;50;160"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;40;40;40"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;40;40;40"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;20;20;20"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;20;20;20"/>
|
||||
</rect>
|
||||
<rect id="line1" x="132" y="60" width="14" height="120" rx="7" ry="7" fill="#33BEFF" transform="rotate(-45 139 120)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="132;152;132;132;70;70"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="60;160;60;60;60;60"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;120;120;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line2" x="105" y="105" width="14" height="80" rx="7" ry="7" fill="#33BEFF" transform="rotate(30 112 145)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="105;100;105;105;120;120"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="105;160;105;105;115;115"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;80;80;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line3" x="45" y="80" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(45 52 105)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="45;90;45;45;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="80;70;80;80;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line4" x="30" y="45" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(90 37 70)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="30;90;30;30;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="45;70;45;45;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line5" x="43" y="8" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(135 50 33)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="43;90;43;43;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="8;70;8;8;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line6" x="81" y="-8" width="14" height="50" rx="7" ry="7" fill="#B1B1B1">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="81;90;81;81;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="-8;70;-8;-8;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line7" x="120" y="6" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(45 127 31)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="120;90;120;120;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="6;70;6;6;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
<rect id="line8" x="135" y="45" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(90 142 70)">
|
||||
<animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="135;90;135;135;90;90"/>
|
||||
<animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="45;70;45;45;70;70"/>
|
||||
<animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
|
||||
<animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
|
||||
<animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
<animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
|
||||
</rect>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,67 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<style>
|
||||
.bg { fill: #ffffff; }
|
||||
.burst { stroke: #1E1E1E; stroke-width: 16; stroke-linecap: round; fill: none; }
|
||||
.tunnel-outer { stroke: #4687F4; stroke-width: 20; stroke-linecap: round; fill: none; opacity: 0.25; }
|
||||
.tunnel-inner { stroke: #4687F4; stroke-width: 8; stroke-linecap: round; fill: none; }
|
||||
.tunnel-dash { stroke: #ffffff; stroke-width: 4; stroke-linecap: round; fill: none; stroke-dasharray: 8 12; }
|
||||
.node-fill { fill: #4687F4; }
|
||||
.node-stroke { stroke: #4687F4; stroke-width: 4; fill: none; }
|
||||
.lock-fill { fill: #1E1E1E; }
|
||||
.lock-hole { fill: #ffffff; }
|
||||
.data-dot { fill: #4687F4; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect class="bg" width="512" height="512" rx="64"/>
|
||||
|
||||
<!-- Burst lines (global network) -->
|
||||
<line class="burst" x1="256" y1="256" x2="256" y2="72"/>
|
||||
<line class="burst" x1="256" y1="256" x2="382" y2="118"/>
|
||||
<line class="burst" x1="256" y1="256" x2="130" y2="118"/>
|
||||
<line class="burst" x1="256" y1="256" x2="440" y2="256"/>
|
||||
<line class="burst" x1="256" y1="256" x2="72" y2="256"/>
|
||||
<line class="burst" x1="256" y1="256" x2="340" y2="80"/>
|
||||
<line class="burst" x1="256" y1="256" x2="172" y2="80"/>
|
||||
|
||||
<!-- VPN Tunnel: encrypted data pipe going through the center -->
|
||||
<!-- Tunnel outer glow -->
|
||||
<path class="tunnel-outer" d="M 80 400 Q 160 320 256 300 Q 352 320 432 400"/>
|
||||
|
||||
<!-- Tunnel inner pipe -->
|
||||
<path class="tunnel-inner" d="M 80 400 Q 160 320 256 300 Q 352 320 432 400"/>
|
||||
|
||||
<!-- Dashed encryption markers along tunnel -->
|
||||
<path class="tunnel-dash" d="M 80 400 Q 160 320 256 300 Q 352 320 432 400"/>
|
||||
|
||||
<!-- Entry/Exit nodes -->
|
||||
<circle class="node-fill" cx="80" cy="400" r="16"/>
|
||||
<circle class="node-fill" cx="432" cy="400" r="16"/>
|
||||
|
||||
<!-- Data packets moving through tunnel -->
|
||||
<circle class="data-dot" cx="160" cy="352" r="6"/>
|
||||
<circle class="data-dot" cx="220" cy="318" r="6"/>
|
||||
<circle class="data-dot" cx="292" cy="318" r="6"/>
|
||||
<circle class="data-dot" cx="352" cy="352" r="6"/>
|
||||
|
||||
<!-- Central Lock (encryption hub) -->
|
||||
<rect class="lock-fill" x="228" y="270" width="56" height="42" rx="8"/>
|
||||
<!-- Lock shackle -->
|
||||
<path class="lock-fill" d="M 240 270 L 240 252 Q 240 238 256 238 Q 272 238 272 252 L 272 270"
|
||||
fill="none" stroke="#1E1E1E" stroke-width="8" stroke-linecap="round"/>
|
||||
<!-- Keyhole -->
|
||||
<circle class="lock-hole" cx="256" cy="288" r="6"/>
|
||||
<rect class="lock-hole" x="252" y="293" width="8" height="12" rx="3"/>
|
||||
|
||||
<!-- Server nodes (top) -->
|
||||
<circle class="node-stroke" cx="200" cy="160" r="20"/>
|
||||
<rect class="node-fill" x="190" y="150" width="20" height="20" rx="3" opacity="0.8"/>
|
||||
|
||||
<circle class="node-stroke" cx="312" cy="160" r="20"/>
|
||||
<rect class="node-fill" x="302" y="150" width="20" height="20" rx="3" opacity="0.8"/>
|
||||
|
||||
<!-- Connection lines from server nodes to hub -->
|
||||
<line class="tunnel-inner" x1="210" y1="178" x2="240" y2="240"/>
|
||||
<line class="tunnel-inner" x1="302" y1="178" x2="272" y2="240"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,53 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<style>
|
||||
.bg { fill: #ffffff; }
|
||||
.line { stroke: #1E1E1E; stroke-width: 14; stroke-linecap: round; fill: none; }
|
||||
.line-blue { stroke: #4687F4; stroke-width: 14; stroke-linecap: round; fill: none; }
|
||||
.line-thin { stroke: #4687F4; stroke-width: 8; stroke-linecap: round; fill: none; }
|
||||
.fill-blue { fill: #4687F4; }
|
||||
.fill-dark { fill: #1E1E1E; }
|
||||
.fill-white { fill: #ffffff; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect class="bg" width="512" height="512" rx="64"/>
|
||||
|
||||
<!-- Minimal lock icon as centerpiece -->
|
||||
<!-- Lock body -->
|
||||
<rect class="fill-blue" x="226" y="234" width="60" height="44" rx="10"/>
|
||||
<!-- Lock shackle -->
|
||||
<path class="fill-blue" d="M 246 234 L 246 212 Q 246 192 256 192 Q 266 192 266 212 L 266 234"/>
|
||||
<!-- White keyhole -->
|
||||
<circle class="fill-white" cx="256" cy="252" r="7"/>
|
||||
<rect class="fill-white" x="251" y="258" width="10" height="14" rx="3"/>
|
||||
|
||||
<!-- Network nodes: 4 client nodes around -->
|
||||
<!-- Top node -->
|
||||
<circle class="fill-dark" cx="256" cy="120" r="16"/>
|
||||
<line class="line" x1="256" y1="136" x2="256" y2="190"/>
|
||||
|
||||
<!-- Left node -->
|
||||
<circle class="fill-dark" cx="100" cy="256" r="16"/>
|
||||
<line class="line" x1="116" y1="256" x2="188" y2="256"/>
|
||||
|
||||
<!-- Right node -->
|
||||
<circle class="fill-dark" cx="412" cy="256" r="16"/>
|
||||
<line class="line" x1="396" y1="256" x2="324" y2="256"/>
|
||||
|
||||
<!-- Bottom-left node -->
|
||||
<circle class="fill-blue" cx="140" cy="400" r="16"/>
|
||||
<!-- Bottom-right node -->
|
||||
<circle class="fill-blue" cx="372" cy="400" r="16"/>
|
||||
|
||||
<!-- Encrypted tunnel paths (dashed) -->
|
||||
<line class="line-thin" x1="246" y1="290" x2="210" y2="340" stroke-dasharray="6 6"/>
|
||||
<line class="line-thin" x1="266" y1="290" x2="302" y2="340" stroke-dasharray="6 6"/>
|
||||
|
||||
<line class="line-blue" x1="210" y1="340" x2="152" y2="395"/>
|
||||
<line class="line-blue" x1="302" y1="340" x2="360" y2="395"/>
|
||||
|
||||
<!-- Data flow dots -->
|
||||
<circle class="fill-blue" cx="228" cy="315" r="5"/>
|
||||
<circle class="fill-blue" cx="284" cy="315" r="5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,71 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<style>
|
||||
.bg { fill: #ffffff; }
|
||||
.hex { stroke: #4687F4; stroke-width: 5; fill: none; }
|
||||
.hex-fill { fill: #4687F4; }
|
||||
.hex-dark { stroke: #1E1E1E; stroke-width: 16; stroke-linecap: round; fill: none; }
|
||||
.key-body { fill: #1E1E1E; }
|
||||
.key-cut { fill: #ffffff; }
|
||||
.burst { stroke: #1E1E1E; stroke-width: 16; stroke-linecap: round; fill: none; }
|
||||
.arc { stroke: #4687F4; stroke-width: 12; stroke-linecap: round; fill: none; }
|
||||
.dot { fill: #4687F4; }
|
||||
.dot-dark { fill: #1E1E1E; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect class="bg" width="512" height="512" rx="64"/>
|
||||
|
||||
<!-- Burst rays (speed/global) -->
|
||||
<line class="burst" x1="256" y1="256" x2="256" y2="56"/>
|
||||
<line class="burst" x1="256" y1="256" x2="394" y2="100"/>
|
||||
<line class="burst" x1="256" y1="256" x2="118" y2="100"/>
|
||||
<line class="burst" x1="256" y1="256" x2="456" y2="256"/>
|
||||
<line class="burst" x1="256" y1="256" x2="56" y2="256"/>
|
||||
<line class="burst" x1="256" y1="256" x2="350" y2="62"/>
|
||||
<line class="burst" x1="256" y1="256" x2="162" y2="62"/>
|
||||
|
||||
<!-- Central hexagonal hub (honeycomb network) -->
|
||||
<!-- Outer hex ring -->
|
||||
<polygon class="hex-dark" points="256,156 342,206 342,306 256,356 170,306 170,206"/>
|
||||
|
||||
<!-- Inner hex ring (smaller, nested) -->
|
||||
<polygon class="hex" points="256,186 316,220 316,292 256,326 196,292 196,220"/>
|
||||
|
||||
<!-- Filled inner hex (core) -->
|
||||
<polygon class="hex-fill" points="256,210 296,234 296,278 256,302 216,278 216,234"/>
|
||||
|
||||
<!-- Key icon inside the core hex -->
|
||||
<!-- Key shaft -->
|
||||
<rect class="key-cut" x="250" y="244" width="28" height="10" rx="3"/>
|
||||
<!-- Key bow (circle) -->
|
||||
<circle class="key-cut" cx="248" cy="258" r="10"
|
||||
fill="none" stroke="#ffffff" stroke-width="4"/>
|
||||
<!-- Key teeth -->
|
||||
<rect class="key-cut" x="270" y="250" width="4" height="8" rx="1"/>
|
||||
<rect class="key-cut" x="266" y="246" width="4" height="6" rx="1"/>
|
||||
|
||||
<!-- Connecting arcs from hex to client nodes -->
|
||||
<!-- Left arc -->
|
||||
<path class="arc" d="M 170 256 Q 100 256 90 320"/>
|
||||
<!-- Right arc -->
|
||||
<path class="arc" d="M 342 256 Q 412 256 422 320"/>
|
||||
<!-- Bottom-left arc -->
|
||||
<path class="arc" d="M 213 356 Q 170 430 120 430"/>
|
||||
<!-- Bottom-right arc -->
|
||||
<path class="arc" d="M 299 356 Q 342 430 392 430"/>
|
||||
|
||||
<!-- Client nodes -->
|
||||
<circle class="dot" cx="90" cy="320" r="18"/>
|
||||
<circle class="dot" cx="422" cy="320" r="18"/>
|
||||
<circle class="dot" cx="120" cy="430" r="18"/>
|
||||
<circle class="dot" cx="392" cy="430" r="18"/>
|
||||
|
||||
<!-- Small connection dots along hex edges -->
|
||||
<circle class="dot-dark" cx="256" cy="156" r="5"/>
|
||||
<circle class="dot-dark" cx="342" cy="206" r="5"/>
|
||||
<circle class="dot-dark" cx="342" cy="306" r="5"/>
|
||||
<circle class="dot-dark" cx="256" cy="356" r="5"/>
|
||||
<circle class="dot-dark" cx="170" cy="306" r="5"/>
|
||||
<circle class="dot-dark" cx="170" cy="206" r="5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,79 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<style>
|
||||
.bg { fill: #ffffff; }
|
||||
.ring { stroke: #4687F4; stroke-width: 4; fill: none; opacity: 0.5; }
|
||||
.ring-bold { stroke: #4687F4; stroke-width: 5; fill: none; opacity: 0.8; }
|
||||
.burst { stroke: #1E1E1E; stroke-width: 16; stroke-linecap: round; fill: none; }
|
||||
.shield-fill { fill: #4687F4; }
|
||||
.shield-cut { fill: #ffffff; }
|
||||
.arc { stroke: #4687F4; stroke-width: 10; stroke-linecap: round; fill: none; }
|
||||
.dot-blue { fill: #4687F4; }
|
||||
.dot-dark { fill: #1E1E1E; }
|
||||
.line-dark { stroke: #1E1E1E; stroke-width: 12; stroke-linecap: round; fill: none; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect class="bg" width="512" height="512" rx="64"/>
|
||||
|
||||
<!-- Concentric security rings (radar / perimeter defense) -->
|
||||
<circle class="ring" cx="256" cy="256" r="100"/>
|
||||
<circle class="ring" cx="256" cy="256" r="140"/>
|
||||
<circle class="ring" cx="256" cy="256" r="180"/>
|
||||
<circle class="ring-bold" cx="256" cy="256" r="220"/>
|
||||
|
||||
<!-- Scan line (rotating radar beam effect) -->
|
||||
<path class="arc" d="M 256 256 L 130 130" opacity="0.4"/>
|
||||
|
||||
<!-- Burst rays (external threats / signal reach) -->
|
||||
<line class="burst" x1="256" y1="256" x2="256" y2="48"/>
|
||||
<line class="burst" x1="256" y1="256" x2="410" y2="86"/>
|
||||
<line class="burst" x1="256" y1="256" x2="102" y2="86"/>
|
||||
<line class="burst" x1="256" y1="256" x2="464" y2="256"/>
|
||||
<line class="burst" x1="256" y1="256" x2="48" y2="256"/>
|
||||
|
||||
<!-- Central shield (protection core) -->
|
||||
<path class="shield-fill" d="M 256 140
|
||||
L 316 168
|
||||
L 316 230
|
||||
Q 316 274 256 296
|
||||
Q 196 274 196 230
|
||||
L 196 168 Z"/>
|
||||
|
||||
<!-- Keyhole cutout on shield -->
|
||||
<circle class="shield-cut" cx="256" cy="210" r="8"/>
|
||||
<rect class="shield-cut" x="250" y="217" width="12" height="18" rx="4"/>
|
||||
|
||||
<!-- VPN tunnel arcs from shield to outer nodes -->
|
||||
<path class="arc" d="M 196 280 Q 130 340 110 410"/>
|
||||
<path class="arc" d="M 316 280 Q 382 340 402 410"/>
|
||||
|
||||
<!-- Outer secure nodes -->
|
||||
<circle class="dot-blue" cx="110" cy="410" r="20"/>
|
||||
<circle class="dot-blue" cx="402" cy="410" r="20"/>
|
||||
|
||||
<!-- Device icons inside nodes (monitor silhouette) -->
|
||||
<rect class="shield-cut" x="102" y="404" width="16" height="12" rx="2"/>
|
||||
<line class="shield-cut" x1="110" y1="418" x2="110" y2="424" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
|
||||
|
||||
<rect class="shield-cut" x="394" y="404" width="16" height="12" rx="2"/>
|
||||
<line class="shield-cut" x1="402" y1="418" x2="402" y2="424" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
|
||||
|
||||
<!-- Top server node -->
|
||||
<circle class="dot-dark" cx="256" cy="72" r="14"/>
|
||||
<!-- Server rack lines -->
|
||||
<line class="shield-cut" x1="248" y1="68" x2="264" y2="68" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
|
||||
<line class="shield-cut" x1="248" y1="72" x2="264" y2="72" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
|
||||
<line class="shield-cut" x1="248" y1="76" x2="264" y2="76" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
|
||||
|
||||
<!-- Connection from top server to shield -->
|
||||
<line class="line-dark" x1="256" y1="86" x2="256" y2="136"/>
|
||||
|
||||
<!-- Perimeter dots at ring intersections -->
|
||||
<circle class="dot-blue" cx="256" cy="36" r="5" opacity="0.6"/>
|
||||
<circle class="dot-blue" cx="356" cy="76" r="5" opacity="0.6"/>
|
||||
<circle class="dot-blue" cx="426" cy="176" r="5" opacity="0.6"/>
|
||||
<circle class="dot-blue" cx="476" cy="256" r="5" opacity="0.6"/>
|
||||
<circle class="dot-blue" cx="86" cy="176" r="5" opacity="0.6"/>
|
||||
<circle class="dot-blue" cx="36" cy="256" r="5" opacity="0.6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,69 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<style>
|
||||
.bg { fill: #ffffff; }
|
||||
.burst { stroke: #1E1E1E; stroke-width: 18; stroke-linecap: round; fill: none; }
|
||||
.tunnel { stroke: #4687F4; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; fill: none; }
|
||||
.node { fill: #4687F4; }
|
||||
.keyhole { fill: #ffffff; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect class="bg" width="512" height="512" rx="64"/>
|
||||
|
||||
<!-- ===== RADIATING BURST LINES (global server network / speed) ===== -->
|
||||
<!-- Top -->
|
||||
<line class="burst" x1="256" y1="256" x2="256" y2="64"/>
|
||||
<!-- Top-right -->
|
||||
<line class="burst" x1="256" y1="256" x2="390" y2="110"/>
|
||||
<!-- Top-right close -->
|
||||
<line class="burst" x1="256" y1="256" x2="350" y2="72"/>
|
||||
<!-- Top-left -->
|
||||
<line class="burst" x1="256" y1="256" x2="122" y2="110"/>
|
||||
<!-- Top-left close -->
|
||||
<line class="burst" x1="256" y1="256" x2="162" y2="72"/>
|
||||
<!-- Right -->
|
||||
<line class="burst" x1="256" y1="256" x2="448" y2="256"/>
|
||||
<!-- Left -->
|
||||
<line class="burst" x1="256" y1="256" x2="64" y2="256"/>
|
||||
|
||||
<!-- ===== ENCRYPTED VPN TUNNELS (branches to clients) ===== -->
|
||||
<!-- Left tunnel: curves down-left to client node -->
|
||||
<path class="tunnel" d="M 218 290 Q 170 310 140 370"/>
|
||||
<!-- Right tunnel: curves down-right to client node -->
|
||||
<path class="tunnel" d="M 294 290 Q 342 310 372 370"/>
|
||||
|
||||
<!-- ===== VPN CLIENT NODES ===== -->
|
||||
<circle class="node" cx="140" cy="370" r="28"/>
|
||||
<circle class="node" cx="372" cy="370" r="28"/>
|
||||
|
||||
<!-- ===== CENTRAL VPN HUB (shield-hexagon with lock) ===== -->
|
||||
<!-- Shield/Hexagon central hub -->
|
||||
<path class="node" d="M 256 170
|
||||
L 330 200
|
||||
L 330 280
|
||||
Q 330 338 256 370
|
||||
Q 182 338 182 280
|
||||
L 182 200 Z"/>
|
||||
|
||||
<!-- Lock keyhole (encryption symbol) -->
|
||||
<!-- Lock body -->
|
||||
<rect class="keyhole" x="236" y="245" width="40" height="32" rx="5"/>
|
||||
<!-- Lock shackle -->
|
||||
<path class="keyhole" d="M 246 245
|
||||
L 246 230
|
||||
Q 246 215 256 215
|
||||
Q 266 215 266 230
|
||||
L 266 245"
|
||||
fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round"/>
|
||||
<!-- Keyhole dot -->
|
||||
<circle class="node" cx="256" cy="258" r="5"/>
|
||||
<!-- Keyhole slot -->
|
||||
<rect class="node" x="253" y="262" width="6" height="10" rx="2"/>
|
||||
|
||||
<!-- ===== CONNECTION DOTS on shield (data flow indicator) ===== -->
|
||||
<circle cx="256" cy="195" r="4" fill="#ffffff" opacity="0.6"/>
|
||||
<circle cx="310" cy="220" r="3.5" fill="#ffffff" opacity="0.4"/>
|
||||
<circle cx="202" cy="220" r="3.5" fill="#ffffff" opacity="0.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,50 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3B82F6"/>
|
||||
<stop offset="100%" style="stop-color:#8B5CF6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4" x1="100%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#06B6D4"/>
|
||||
<stop offset="100%" style="stop-color:#3B82F6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect width="512" height="512" rx="96" fill="#0F172A"/>
|
||||
|
||||
<!-- Two interlocking rings - dual VPN tunnel concept -->
|
||||
<g fill="none" stroke-width="20" stroke-linecap="round">
|
||||
<!-- Left ring -->
|
||||
<circle cx="200" cy="300" r="120" stroke="url(#g3)" opacity="0.9"/>
|
||||
<!-- Right ring -->
|
||||
<circle cx="312" cy="300" r="120" stroke="url(#g4)" opacity="0.9"/>
|
||||
|
||||
<!-- Ring data flow indicators -->
|
||||
<circle cx="200" cy="180" r="6" fill="url(#g3)" stroke="none"/>
|
||||
<circle cx="312" cy="180" r="6" fill="url(#g4)" stroke="none"/>
|
||||
|
||||
<!-- Bottom ring highlights -->
|
||||
<circle cx="160" cy="380" r="5" fill="url(#g3)" stroke="none"/>
|
||||
<circle cx="352" cy="380" r="5" fill="url(#g4)" stroke="none"/>
|
||||
</g>
|
||||
|
||||
<!-- Central lock - sits at the intersection of rings -->
|
||||
<g transform="translate(256,300)">
|
||||
<!-- Lock body -->
|
||||
<rect x="-36" y="-8" width="72" height="56" rx="12" fill="#ffffff"/>
|
||||
<!-- Lock shackle -->
|
||||
<path d="M -24 -8 L -24 -32 Q -24 -48 0 -48 Q 24 -48 24 -32 L 24 -8"
|
||||
fill="none" stroke="#ffffff" stroke-width="10" stroke-linecap="round"/>
|
||||
<!-- Keyhole -->
|
||||
<circle cx="0" cy="14" r="8" fill="#0F172A"/>
|
||||
<path d="M -5 20 L 5 20 L 7 38 L -7 38 Z" fill="#0F172A"/>
|
||||
|
||||
<!-- Ring intersection glow -->
|
||||
<circle cx="-26" cy="-4" r="10" fill="#0F172A"/>
|
||||
<circle cx="26" cy="-4" r="10" fill="#0F172A"/>
|
||||
</g>
|
||||
|
||||
<!-- Outer node dots -->
|
||||
<circle cx="110" cy="210" r="8" fill="url(#g3)"/>
|
||||
<circle cx="402" cy="210" r="8" fill="url(#g4)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,43 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<linearGradient id="g5" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#60A5FA"/>
|
||||
<stop offset="100%" style="stop-color:#1D4ED8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect width="512" height="512" rx="96" fill="#ffffff"/>
|
||||
|
||||
<!-- Perspective tunnel - 3 nested rounded rectangles getting smaller = depth -->
|
||||
<g fill="none" stroke="url(#g5)" stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- Outermost frame -->
|
||||
<rect x="80" y="80" width="352" height="352" rx="60" stroke-width="6" opacity="0.2"/>
|
||||
<!-- Second frame -->
|
||||
<rect x="120" y="120" width="272" height="272" rx="48" stroke-width="6" opacity="0.35"/>
|
||||
<!-- Third frame -->
|
||||
<rect x="160" y="160" width="192" height="192" rx="36" stroke-width="6" opacity="0.55"/>
|
||||
<!-- Fourth frame -->
|
||||
<rect x="200" y="200" width="112" height="112" rx="24" stroke-width="8" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- Lock at center of tunnel -->
|
||||
<g>
|
||||
<rect x="236" y="240" width="40" height="32" rx="8" fill="#1D4ED8"/>
|
||||
<path d="M 246 240 L 246 222 Q 246 210 256 210 Q 266 210 266 222 L 266 240"
|
||||
fill="none" stroke="#1D4ED8" stroke-width="7" stroke-linecap="round"/>
|
||||
<circle cx="256" cy="254" r="5" fill="#ffffff"/>
|
||||
<rect x="252" y="258" width="8" height="8" rx="2" fill="#ffffff"/>
|
||||
</g>
|
||||
|
||||
<!-- Corner network dots -->
|
||||
<circle cx="80" cy="80" r="8" fill="#3B82F6" opacity="0.3"/>
|
||||
<circle cx="432" cy="80" r="8" fill="#3B82F6" opacity="0.3"/>
|
||||
<circle cx="80" cy="432" r="8" fill="#3B82F6" opacity="0.3"/>
|
||||
<circle cx="432" cy="432" r="8" fill="#3B82F6" opacity="0.3"/>
|
||||
|
||||
<!-- Data flow dots along tunnel edges -->
|
||||
<circle cx="140" cy="140" r="4" fill="#60A5FA"/>
|
||||
<circle cx="372" cy="140" r="4" fill="#60A5FA"/>
|
||||
<circle cx="140" cy="372" r="4" fill="#60A5FA"/>
|
||||
<circle cx="372" cy="372" r="4" fill="#60A5FA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,41 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<linearGradient id="g6" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#2563EB"/>
|
||||
<stop offset="100%" style="stop-color:#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Warm dark bg -->
|
||||
<rect width="512" height="512" rx="96" fill="#1E1B4B"/>
|
||||
|
||||
<!-- Abstract VPN letterform: V + shield -->
|
||||
<!-- Large V shape forming a shield silhouette -->
|
||||
<g stroke="url(#g6)" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" fill="none">
|
||||
<!-- Left shield arm + V leg -->
|
||||
<path d="M 130 110 L 256 340 L 256 420"/>
|
||||
<!-- Right shield arm + V leg -->
|
||||
<path d="M 382 110 L 256 340 L 256 420"/>
|
||||
<!-- Shield top curve -->
|
||||
<path d="M 130 110 Q 256 30 382 110"/>
|
||||
</g>
|
||||
|
||||
<!-- Inner V (smaller, offset up) -->
|
||||
<path d="M 175 150 L 256 300 M 337 150 L 256 300"
|
||||
stroke="url(#g6)" stroke-width="8" stroke-linecap="round" fill="none" opacity="0.5"/>
|
||||
|
||||
<!-- Center dot = keyhole / eye -->
|
||||
<circle cx="256" cy="260" r="16" fill="#1E1B4B" stroke="url(#g6)" stroke-width="6"/>
|
||||
<circle cx="256" cy="260" r="6" fill="url(#g6)"/>
|
||||
|
||||
<!-- Network nodes at V tips -->
|
||||
<circle cx="130" cy="110" r="10" fill="url(#g6)"/>
|
||||
<circle cx="382" cy="110" r="10" fill="url(#g6)"/>
|
||||
|
||||
<!-- Bottom client nodes -->
|
||||
<circle cx="190" cy="440" r="10" fill="url(#g6)" opacity="0.7"/>
|
||||
<circle cx="322" cy="440" r="10" fill="url(#g6)" opacity="0.7"/>
|
||||
|
||||
<!-- Horizontal network line between bottom nodes -->
|
||||
<line x1="200" y1="440" x2="312" y2="440" stroke="url(#g6)" stroke-width="3" opacity="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,68 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<linearGradient id="g7" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#1E40AF"/>
|
||||
<stop offset="50%" style="stop-color:#3B82F6"/>
|
||||
<stop offset="100%" style="stop-color:#06B6D4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect width="512" height="512" rx="96" fill="#0B1121"/>
|
||||
|
||||
<!-- Circuit board VPN concept -->
|
||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
||||
<!-- Main circuit lines -->
|
||||
<!-- Left to center -->
|
||||
<path d="M 60 220 L 160 220 L 200 260" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
|
||||
<!-- Right to center -->
|
||||
<path d="M 452 220 L 352 220 L 312 260" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
|
||||
<!-- Bottom left to center -->
|
||||
<path d="M 160 440 L 200 380 L 226 340" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
|
||||
<!-- Bottom right to center -->
|
||||
<path d="M 352 440 L 312 380 L 286 340" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
|
||||
<!-- Top to center -->
|
||||
<path d="M 256 60 L 256 180" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
|
||||
|
||||
<!-- Circuit node pads -->
|
||||
<circle cx="60" cy="220" r="7" fill="url(#g7)" opacity="0.6"/>
|
||||
<circle cx="452" cy="220" r="7" fill="url(#g7)" opacity="0.6"/>
|
||||
<circle cx="160" cy="440" r="7" fill="url(#g7)" opacity="0.6"/>
|
||||
<circle cx="352" cy="440" r="7" fill="url(#g7)" opacity="0.6"/>
|
||||
<circle cx="256" cy="60" r="7" fill="url(#g7)" opacity="0.6"/>
|
||||
|
||||
<!-- Corner pads -->
|
||||
<circle cx="160" cy="220" r="5" fill="url(#g7)" opacity="0.5"/>
|
||||
<circle cx="352" cy="220" r="5" fill="url(#g7)" opacity="0.5"/>
|
||||
<circle cx="200" cy="380" r="5" fill="url(#g7)" opacity="0.5"/>
|
||||
<circle cx="312" cy="380" r="5" fill="url(#g7)" opacity="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Central lock - the CPU/chip -->
|
||||
<g>
|
||||
<!-- Chip body -->
|
||||
<rect x="220" y="240" width="72" height="72" rx="16" fill="url(#g7)"/>
|
||||
|
||||
<!-- Lock shackle on chip -->
|
||||
<path d="M 242 240 L 242 220 Q 242 202 256 202 Q 270 202 270 220 L 270 240"
|
||||
fill="none" stroke="#0B1121" stroke-width="8" stroke-linecap="round"/>
|
||||
|
||||
<!-- Chip pins (subtle) -->
|
||||
<rect x="224" y="236" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
|
||||
<rect x="240" y="236" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
|
||||
<rect x="264" y="236" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
|
||||
<rect x="280" y="236" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
|
||||
|
||||
<rect x="224" y="272" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
|
||||
<rect x="240" y="272" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
|
||||
<rect x="264" y="272" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
|
||||
<rect x="280" y="272" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
|
||||
|
||||
<!-- Keyhole -->
|
||||
<circle cx="256" cy="266" r="7" fill="#0B1121"/>
|
||||
<path d="M 252 272 L 260 272 L 262 290 L 250 290 Z" fill="#0B1121"/>
|
||||
</g>
|
||||
|
||||
<!-- Glow effect around chip -->
|
||||
<rect x="210" y="230" width="92" height="92" rx="20" fill="none" stroke="url(#g7)" stroke-width="3" opacity="0.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,43 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#2563EB"/>
|
||||
<stop offset="100%" style="stop-color:#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="512" height="512" rx="96" fill="#0F172A"/>
|
||||
|
||||
<!-- Central lock icon - clean geometric -->
|
||||
<g transform="translate(256,256)">
|
||||
<!-- Lock shackle - rounded rectangle with cutout -->
|
||||
<path d="M -48 -20 L -48 -60 Q -48 -90 0 -90 Q 48 -90 48 -60 L 48 -20"
|
||||
fill="none" stroke="url(#g1)" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<!-- Lock body -->
|
||||
<rect x="-64" y="-16" width="128" height="100" rx="20" fill="url(#g1)"/>
|
||||
|
||||
<!-- Keyhole -->
|
||||
<circle cx="0" cy="20" r="12" fill="#0F172A"/>
|
||||
<path d="M -7 30 L 7 30 L 10 58 L -10 58 Z" fill="#0F172A"/>
|
||||
</g>
|
||||
|
||||
<!-- VPN tunnel arcs around the lock -->
|
||||
<g fill="none" stroke="url(#g1)" stroke-width="6" stroke-linecap="round" opacity="0.6">
|
||||
<!-- Top arc -->
|
||||
<path d="M 140 156 Q 256 60 372 156"/>
|
||||
<!-- Bottom arcs -->
|
||||
<path d="M 120 390 Q 180 350 220 370" stroke-width="4"/>
|
||||
<path d="M 392 390 Q 332 350 292 370" stroke-width="4"/>
|
||||
</g>
|
||||
|
||||
<!-- Data nodes -->
|
||||
<circle cx="120" cy="390" r="10" fill="url(#g1)"/>
|
||||
<circle cx="392" cy="390" r="10" fill="url(#g1)"/>
|
||||
<circle cx="256" cy="72" r="8" fill="url(#g1)"/>
|
||||
|
||||
<!-- Small connection dots -->
|
||||
<circle cx="180" cy="310" r="4" fill="url(#g1)" opacity="0.5"/>
|
||||
<circle cx="332" cy="310" r="4" fill="url(#g1)" opacity="0.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,37 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<!-- Clean white bg -->
|
||||
<rect width="512" height="512" rx="96" fill="#ffffff"/>
|
||||
|
||||
<!-- Single continuous line VPN tunnel forming a lock shape -->
|
||||
<g fill="none" stroke="#2563EB" stroke-width="16" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
||||
<!-- Left tunnel from bottom-left node going up -->
|
||||
<path d="M 100 380 Q 100 300 160 240"/>
|
||||
|
||||
<!-- Lock shackle - continuous from left -->
|
||||
<path d="M 160 240 Q 160 140 256 140 Q 352 140 352 240"/>
|
||||
|
||||
<!-- Lock body transition -->
|
||||
<path d="M 352 240 Q 340 220 320 220 L 192 220 Q 172 220 160 240"/>
|
||||
|
||||
<!-- Lock body bottom -->
|
||||
<path d="M 160 240 L 160 340 Q 160 370 192 370 L 320 370 Q 352 370 352 340 L 352 240"/>
|
||||
|
||||
<!-- Right tunnel going down -->
|
||||
<path d="M 352 240 Q 412 300 412 380"/>
|
||||
</g>
|
||||
|
||||
<!-- Keyhole negative space -->
|
||||
<circle cx="256" cy="270" r="14" fill="#ffffff"/>
|
||||
<path d="M 246 282 L 266 282 L 270 322 L 242 322 Z" fill="#ffffff"/>
|
||||
|
||||
<!-- End nodes -->
|
||||
<circle cx="100" cy="380" r="16" fill="#2563EB"/>
|
||||
<circle cx="412" cy="380" r="16" fill="#2563EB"/>
|
||||
|
||||
<!-- Data flow dots -->
|
||||
<circle cx="130" cy="330" r="5" fill="#60A5FA"/>
|
||||
<circle cx="382" cy="330" r="5" fill="#60A5FA"/>
|
||||
<circle cx="160" cy="180" r="4" fill="#60A5FA"/>
|
||||
<circle cx="352" cy="180" r="4" fill="#60A5FA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,42 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1D4ED8"/>
|
||||
<stop offset="100%" style="stop-color:#06B6D4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect width="512" height="512" rx="96" fill="#0B1121"/>
|
||||
|
||||
<!-- Geometric chevron/lock VPN concept -->
|
||||
<g transform="translate(256,230)">
|
||||
|
||||
<!-- Top chevron - shield outline -->
|
||||
<path d="M -100 -80 L 0 -180 L 100 -80"
|
||||
fill="none" stroke="url(#g2)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<!-- Center chevron -->
|
||||
<path d="M -70 -40 L 0 -120 L 70 -40"
|
||||
fill="none" stroke="url(#g2)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<!-- Inner chevron -->
|
||||
<path d="M -40 0 L 0 -60 L 40 0"
|
||||
fill="url(#g2)"/>
|
||||
|
||||
<!-- Lock dot on inner chevron -->
|
||||
<circle cx="0" cy="-25" r="8" fill="#0B1121"/>
|
||||
|
||||
<!-- Bottom chevrons - tunnel effect -->
|
||||
<path d="M -100 40 L -40 0 L -40 100"
|
||||
fill="none" stroke="url(#g2)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
|
||||
<path d="M 100 40 L 40 0 L 40 100"
|
||||
fill="none" stroke="url(#g2)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- Client nodes -->
|
||||
<circle cx="156" cy="380" r="12" fill="url(#g2)"/>
|
||||
<circle cx="356" cy="380" r="12" fill="url(#g2)"/>
|
||||
|
||||
<!-- Horizontal network line -->
|
||||
<line x1="168" y1="380" x2="344" y2="380" stroke="url(#g2)" stroke-width="3" opacity="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,30 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<rect width="512" height="512" rx="96" fill="#ffffff"/>
|
||||
|
||||
<!-- Negative space approach: the keyhole IS the tunnel -->
|
||||
|
||||
<!-- Large blue circle base -->
|
||||
<circle cx="256" cy="246" r="130" fill="#2563EB"/>
|
||||
|
||||
<!-- Negative space keyhole (revealing white bg) -->
|
||||
<!-- Upper circle of keyhole -->
|
||||
<circle cx="256" cy="210" r="28" fill="#ffffff"/>
|
||||
<!-- Lower slot of keyhole - widened to form a tunnel -->
|
||||
<path d="M 242 230 L 270 230 L 278 340 L 234 340 Z" fill="#ffffff"/>
|
||||
|
||||
<!-- Tunnel exit node (bottom) -->
|
||||
<circle cx="256" cy="390" r="18" fill="#2563EB"/>
|
||||
|
||||
<!-- Subtle horizontal data lines in the tunnel slot -->
|
||||
<line x1="246" y1="270" x2="266" y2="270" stroke="#2563EB" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="244" y1="290" x2="268" y2="290" stroke="#2563EB" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="242" y1="310" x2="270" y2="310" stroke="#2563EB" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
||||
|
||||
<!-- Client dots -->
|
||||
<circle cx="130" cy="310" r="10" fill="#DBEAFE"/>
|
||||
<circle cx="382" cy="310" r="10" fill="#DBEAFE"/>
|
||||
|
||||
<!-- Connection lines -->
|
||||
<line x1="156" y1="310" x2="208" y2="280" stroke="#DBEAFE" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="356" y1="310" x2="304" y2="280" stroke="#DBEAFE" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user