|
/pages/services.html
|
<svg viewbox="-5 -5 1010 1010" style="max-width:350px; margin-left:auto; margin-right:auto; display:block;">
<style>
.block1 {
fill:#bfceda;
stroke:#bfceda;
}
.block2 {
fill:#809eb5;
stroke:#809eb5;
}
.block3 {
fill:#416d90;
stroke:#416d90;
}
.block4 {
fill:#023d6b;
stroke:#023d6b;
}
.service-icon {
height:100%;
display:flex;
justify-content:center;
align-items:center;
padding:1px;
}
.service-hider {
opacity:0;
transition:opacity 0.5s;
cursor:pointer;
}
.block1:hover ~ .service-hider, .block1-text:hover ~ .service-hider, .block2:hover ~ .service-hider, .block2-text:hover ~ .service-hider, .block3:hover ~ .service-hider, .block3-text:hover ~ .service-hider, .block4:hover ~ .service-hider, .block4-text:hover ~ .service-hider {
opacity:0.9;
}
.block1:hover ~ .block1-service-hider.service-hider, .block1-text:hover ~ .block1-service-hider.service-hider {
opacity:0;
}
.block2:hover ~ .block2-service-hider.service-hider, .block2-text:hover ~ .block2-service-hider.service-hider {
opacity:0;
}
.block3:hover ~ .block3-service-hider.service-hider, .block3-text:hover ~ .block3-service-hider.service-hider {
opacity:0;
}
.block4:hover ~ .block4-service-hider.service-hider, .block4-text:hover ~ .block4-service-hider.service-hider {
opacity:0;
}
</style>
<defs>
<path id="arc1" d="M 112.5 500 A 387.5 387.5 0 0 1 887.5 500">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="-90 500 500" to="0 500 500" dur="1s" begin="1s" repeatcount="1"></animatetransform>
</path>
<path id="arc2" d="M 500 112.5 A 387.5 387.5 0 0 1 500 887.5">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="-90 500 500" to="0 500 500" dur="1s" begin="2s" repeatcount="1"></animatetransform>
</path>
<path id="arc3" d="M 887.5 500 A 387.5 387.5 0 0 1 112.5 500">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="-90 500 500" to="0 500 500" dur="1s" begin="3s" repeatcount="1"></animatetransform>
</path>
<path id="arc4" d="M 500 887.5 A 387.5 387.5 0 0 1 500 112.5">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="-90 500 500" to="0 500 500" dur="1s" begin="4s" repeatcount="1"></animatetransform>
</path>
</defs>
<g>
<path d="M 500 175 A 325 325 0 0 1 825 500 L 975 500 A 475 475 0 0 0 500 25" class="block4" transform="rotate(225, 500, 500)">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="135 500 500" to="225 500 500" dur="1s" begin="4s" repeatcount="1"></animatetransform>
<animate attributename="opacity" from="0" to="0" dur="4s" begin="0s" repeatcount="1"></animate>
</path>
<text fill="white" font-size="40" text-anchor="middle" class="block4-text">
<textpath xlink:href="#arc4" startoffset="50%">
Publication
</textpath>
<animate attributename="opacity" from="0" to="0" dur="4s" begin="0s" repeatcount="1"></animate>
<animate attributename="opacity" from="0" to="1" dur="1s" begin="4s" repeatcount="1"></animate>
</text>
<path d="M 500 175 A 325 325 0 0 1 825 500 L 975 500 A 475 475 0 0 0 500 25" class="block3" transform="rotate(135, 500, 500)">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="45 500 500" to="135 500 500" dur="1s" begin="3s" repeatcount="1"></animatetransform>
<animate attributename="opacity" from="0" to="0" dur="3s" begin="0s" repeatcount="1"></animate>
</path>
<text fill="white" font-size="40" text-anchor="middle" class="block3-text">
<textpath xlink:href="#arc3" startoffset="50%">
Data Analysis
</textpath>
<animate attributename="opacity" from="0" to="0" dur="3s" begin="0s" repeatcount="1"></animate>
<animate attributename="opacity" from="0" to="1" dur="0.5s" begin="3s" repeatcount="1"></animate>
</text>
<path d="M 500 175 A 325 325 0 0 1 825 500 L 975 500 A 475 475 0 0 0 500 25" class="block2" transform="rotate(45, 500, 500)">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="-45 500 500" to="45 500 500" dur="1s" begin="2s" repeatcount="1"></animatetransform>
<animate attributename="opacity" from="0" to="0" dur="2s" begin="0s" repeatcount="1"></animate>
</path>
<text fill="white" font-size="40" text-anchor="middle" class="block2-text">
<textpath xlink:href="#arc2" startoffset="53%">
Simulations & Experiments
</textpath>
<animate attributename="opacity" from="0" to="0" dur="2s" begin="0s" repeatcount="1"></animate>
<animate attributename="opacity" from="0" to="1" dur="0.5s" begin="2s" repeatcount="1"></animate>
</text>
<path d="M 500 175 A 325 325 0 0 1 825 500 L 975 500 A 475 475 0 0 0 500 25" class="block1" transform="rotate(-45, 500, 500)">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="-135 500 500" to="-45 500 500" dur="1s" begin="1s" repeatcount="1"></animatetransform>
<animate attributename="opacity" from="0" to="0" dur="1s" begin="0s" repeatcount="1"></animate>
<animate attributename="opacity" from="0" to="1" dur="1s" begin="1s" repeatcount="1"></animate>
</path>
<text fill="white" font-size="40" text-anchor="middle" class="block1-text">
<textpath xlink:href="#arc1" startoffset="50%">
Idea & Planning
</textpath>
<animate attributename="opacity" from="0" to="0" dur="1s" begin="0s" repeatcount="1"></animate>
<animate attributename="opacity" from="0" to="1" dur="0.5s" begin="1s" repeatcount="1"></animate>
</text>
<path d="M 825 499 L 900 550 L 975 499" class="block4" transform="rotate(225, 500, 500)">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="135 500 500" to="225 500 500" dur="1s" begin="4s" repeatcount="1"></animatetransform>
<animate attributename="opacity" from="0" to="0" dur="4s" begin="0s" repeatcount="1"></animate>
</path>
<path d="M 825 499 L 900 550 L 975 499" class="block3" transform="rotate(135, 500, 500)">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="45 500 500" to="135 500 500" dur="1s" begin="3s" repeatcount="1"></animatetransform>
<animate attributename="opacity" from="0" to="0" dur="3s" begin="0s" repeatcount="1"></animate>
</path>
<path d="M 825 499 L 900 550 L 975 499" class="block2" transform="rotate(45, 500, 500)">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="-45 500 500" to="45 500 500" dur="1s" begin="2s" repeatcount="1"></animatetransform>
<animate attributename="opacity" from="0" to="0" dur="2s" begin="0s" repeatcount="1"></animate>
</path>
<path d="M 825 499 L 900 550 L 975 499" class="block1" transform="rotate(-45, 500, 500)">
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="-135 500 500" to="-45 500 500" dur="1s" begin="1s" repeatcount="1"></animatetransform>
<animate attributename="opacity" from="0" to="1" dur="1s" begin="1s" repeatcount="1"></animate>
<animate attributename="opacity" from="0" to="0" dur="1s" begin="0s" repeatcount="1"></animate>
</path>
<animatetransform attributetype="xml" attributename="transform" type="rotate" from="0 500 500" to="360 500 500" dur="25s" begin="1s" repeatcount="100"></animatetransform>
</g>
<g transform="translate(500, 500)">
<circle cx="0" cy="0" r="325.0" stroke="transparent" fill="white"></circle>
<g transform="scale(0.24)">
<path d="M16.272,19.299L23.678,0.131C14.475,-0.865 5.385,3.889 1.073,12.338L1.038,12.463L0.717,13.287C-1.521,19.088 1.897,23.369 5.214,24.654C8.522,25.932 14.03,25.096 16.272,19.299M29.686,24.268C25.245,35.768 14.624,40.084 4.94,38.424C7.163,40.725 9.901,42.592 13.081,43.822C24.76,48.334 37.885,42.525 42.397,30.846C45.835,21.951 43.28,12.221 36.71,6.092L29.686,24.268Z" style="fill:rgb(5,53,92);fill-rule:nonzero;" transform="translate(-1282, -1282) translate(141, 64) matrix(53.7764,0,0,53.7764,-1.23118e-06,8.06066e-05)"></path>
<animatetransform attributetype="xml" attributename="transform" type="scale" from="0.39" to="0.24" dur="0.75s" begin="0.25s" repeatcount="1"></animatetransform>
<animatetransform attributetype="xml" attributename="transform" type="scale" from="0.39" to="0.39" dur="0.25s" begin="0s" repeatcount="1"></animatetransform>
</g>
</g>
</svg>
|
|
Анализировать url
|
MediaWiki
nginx