API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 10th, 2018
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.44 KB | None | 0 0
raw download clone embed print report
  1. import React, {Component} from 'react';
  2. import Logo from '../Logo';
  3. import Exit from '../../media/exit.png';
  4. import Socials from '../Socials';
  5. import '../../Styles/MapStrategy.css';
  6. import * as d3 from "d3";
  7.  
  8.  
  9.  
  10. export default class extends Component {
  11.  
  12.  
  13.  
  14. componentDidMount(){
  15.  
  16.  
  17. /* ANIMATION PATH */
  18. d3.selectAll(".path_digital_studio")
  19. .each(function(){
  20. let totalLength = d3.select(this).node().getTotalLength();
  21. d3.select(this)
  22. .attr("stroke-dasharray", `${totalLength} ${totalLength}`)
  23. .attr("stroke-dashoffset", totalLength)
  24. .attr("stroke", "#E35D14")
  25. .attr("stroke-width", "2")
  26. .transition()
  27. .duration(2000)
  28. .ease(d3.easeLinear)
  29. .attr("stroke-dashoffset", 0);
  30. });
  31. d3.selectAll(".path_branding_studio")
  32. .each(function(){
  33. let totalLength = d3.select(this).node().getTotalLength();
  34. d3.select(this)
  35. .attr("stroke-dasharray", `${totalLength} ${totalLength}`)
  36. .attr("stroke-dashoffset", totalLength)
  37. .attr("stroke", "white")
  38. .attr("stroke-width", "2")
  39. .transition()
  40. .duration(2000)
  41. .ease(d3.easeLinear)
  42. .attr("stroke-dashoffset", 0);
  43. });
  44.  
  45. d3.timeout(function(){
  46. d3.selectAll("text")
  47. .style("fill", "white");
  48. d3.selectAll("g")
  49. .each(function(d, i){
  50. if(i==0 || i==1){
  51. d3.select(this).selectAll("text").transition().duration(500).ease(d3.easeLinear).style("font-size", "20px").style("font-weight", "300");
  52. }
  53. });
  54. d3.selectAll(".W1 circle")
  55. .transition()
  56. .duration(500)
  57. .ease(d3.easeLinear)
  58. .style('fill', "white")
  59. .style('stroke', "white")
  60. .call(showCircle, 20);
  61. d3.selectAll(".O1 circle")
  62. .transition()
  63. .duration(500)
  64. .ease(d3.easeLinear)
  65. .style('fill', "#E35D14")
  66. .style('stroke', "#E35D14")
  67. .call(showCircle, 20);
  68. }, 2000);
  69. d3.timeout(function(){
  70. d3.selectAll(".W2 circle")
  71. .transition()
  72. .duration(500)
  73. .ease(d3.easeLinear)
  74. .style('fill', "white")
  75. .style('stroke', "white")
  76. .call(showCircle, 15);
  77. d3.selectAll(".O2 circle")
  78. .transition()
  79. .duration(500)
  80. .ease(d3.easeLinear)
  81. .style('fill', "#E35D14")
  82. .style('stroke', "#E35D14")
  83. .call(showCircle, 15);
  84. }, 2400);
  85. d3.timeout(function(){
  86. d3.selectAll(".W3 circle")
  87. .transition()
  88. .duration(500)
  89. .ease(d3.easeLinear)
  90. .style('fill', "white")
  91. .style('stroke', "white")
  92. .call(showCircle, 15);
  93. d3.selectAll(".O3 circle")
  94. .transition()
  95. .duration(500)
  96. .ease(d3.easeLinear)
  97. .style('fill', "#E35D14")
  98. .style('stroke', "#E35D14")
  99. .call(showCircle, 15);
  100. }, 2800);
  101. d3.timeout(function(){
  102. d3.selectAll(".O4 circle")
  103. .transition()
  104. .duration(500)
  105. .ease(d3.easeLinear)
  106. .style('fill', "#E35D14")
  107. .style('stroke', "#E35D14")
  108. .call(showCircle, 15);
  109. }, 3200);
  110.  
  111.  
  112.  
  113. /* ANIMATION FOR ALL */
  114. var max_x, min_x, max_y, min_y;
  115. var flag = false;
  116. d3.selectAll(".W1, .O1").select("circle")
  117. .each(function(){
  118. if(typeof max_x == "undefined"){
  119. max_x = d3.select(this).attr("cx");
  120. }else{
  121. let current_x = d3.select(this).attr("cx");
  122. if(max_x < Number(current_x)) max_x = Number(current_x);
  123. }
  124. if(typeof min_x == "undefined"){
  125. min_x = d3.select(this).attr("cx");
  126. }else{
  127. let current_x = d3.select(this).attr("cx");
  128. if(min_x > Number(current_x)) min_x = Number(current_x);
  129. }
  130. if(typeof max_y == "undefined"){
  131. max_y = d3.select(this).attr("cy");
  132. }else{
  133. let current_y = d3.select(this).attr("cy");
  134. if(max_y < Number(current_y)) max_y = Number(current_y);
  135. }
  136. if(typeof min_y == "undefined"){
  137. min_y = d3.select(this).attr("cy");
  138. }else{
  139. let current_y = d3.select(this).attr("cy");
  140. if(min_y > Number(current_y)) min_y = Number(current_y);
  141. }
  142. })
  143. .call(function(){
  144. min_x += 80;
  145. max_x -= 80;
  146. min_y += 80;
  147. max_y -= 80;
  148. });
  149. d3.select("svg")
  150. .on("mousemove", function(){
  151. let mouse_x = d3.mouse(this)[0];
  152. let mouse_y = d3.mouse(this)[1];
  153. if(mouse_x > min_x && mouse_x < max_x && mouse_y > min_y && mouse_y < max_y){
  154. d3.selectAll(".W1, .O1")
  155. .each(function(){
  156. let current_node = d3.select(this).node();
  157. let svg = d3.select("svg").node();
  158. d3.select(this).node().remove();
  159. svg.appendChild(current_node);
  160. });
  161. d3.selectAll(".W1, .O1").select('circle')
  162. .transition()
  163. .duration(300)
  164. .ease(d3.easeLinear)
  165. .style('fill', "#292929")
  166. .attr('r', 35);
  167. d3.selectAll(".W1, .O1").select('text')
  168. .transition()
  169. .duration(300)
  170. .ease(d3.easeLinear)
  171. .style('font-size', '15px');
  172. flag = true;
  173. }else if(flag == true){
  174. d3.selectAll(".W1").select("circle")
  175. .transition()
  176. .duration(300)
  177. .ease(d3.easeLinear)
  178. .style("fill", "white")
  179. .attr("r", "20");
  180. d3.selectAll(".O1").select("circle")
  181. .transition()
  182. .duration(300)
  183. .ease(d3.easeLinear)
  184. .style("fill", "#E35D14")
  185. .attr("r", "20");
  186. d3.selectAll(".W1, .O1").select("text")
  187. .transition()
  188. .duration(300)
  189. .ease(d3.easeLinear)
  190. .style("font-size", "0px");
  191. flag = false;
  192. }
  193. });
  194.  
  195.  
  196. d3.selectAll("g")
  197. .on("mouseover", function(){
  198. if(d3.select(this).attr("class") != null){
  199. let name_class = d3.select(this).attr("class").substring(3);
  200. d3.selectAll(`.${name_class}`)
  201. .each(function(){
  202. let level = d3.select(this).attr("class").substring(0, 2);
  203. if(level == "W1" || level == "O1"){
  204. d3.select(this).select('circle')
  205. .transition()
  206. .duration(300)
  207. .ease(d3.easeLinear)
  208. .style('fill', "#292929")
  209. .attr('r', 30);
  210. d3.select(this).select('text')
  211. .transition()
  212. .duration(300)
  213. .ease(d3.easeLinear)
  214. .style('font-size', '15px');
  215. }else{
  216. d3.select(this).select('circle')
  217. .transition()
  218. .duration(300)
  219. .ease(d3.easeLinear)
  220. .style('fill', "#292929")
  221. .attr('r', 25);
  222. d3.select(this).select('text')
  223. .transition()
  224. .duration(300)
  225. .ease(d3.easeLinear)
  226. .style('font-size', '10px');
  227. }
  228. });
  229. }
  230. if(d3.select(this).attr("class") != null){
  231. let current_node = d3.select(this).node();
  232. let svg = d3.select("svg").node();
  233. d3.select(this).node().remove();
  234. svg.appendChild(current_node);
  235. d3.select(current_node).select('circle')
  236. .transition()
  237. .duration(300)
  238. .ease(d3.easeLinear)
  239. .style('fill', "#292929")
  240. .attr('r', 40);
  241. d3.select(current_node).select('text')
  242. .transition()
  243. .duration(300)
  244. .ease(d3.easeLinear)
  245. .style('text-shadow', '0px 0px 10px black')
  246. .style('font-size', '35px');
  247. }
  248. })
  249. .on("mouseleave", function(){
  250. if(d3.select(this).attr("class") != null){
  251. let name_class = d3.select(this).attr("class").substring(3);
  252. d3.selectAll(`.${name_class}`)
  253. .each(function(){
  254. let level = d3.select(this).attr("class").substring(0, 2);
  255. let type = d3.select(this).attr("class").substring(0,1);
  256. if(level == "O1"){
  257. d3.select(this).select('circle')
  258. .transition()
  259. .duration(300)
  260. .ease(d3.easeLinear)
  261. .style('fill', "#E35D14")
  262. .attr('r', 20);
  263. }else if(level == "W1"){
  264. d3.select(this).select('circle')
  265. .transition()
  266. .duration(300)
  267. .ease(d3.easeLinear)
  268. .style('fill', "white")
  269. .attr('r', 20);
  270. }else if(type == "W"){
  271. d3.select(this).select('circle')
  272. .transition()
  273. .duration(300)
  274. .ease(d3.easeLinear)
  275. .style("fill", "white")
  276. .attr('r', 15);
  277. }else if(type == "O"){
  278. d3.select(this).select('circle')
  279. .transition()
  280. .duration(300)
  281. .ease(d3.easeLinear)
  282. .style("fill", "#E35D14")
  283. .attr('r', 15);
  284. }
  285. d3.select(this).select('text')
  286. .transition()
  287. .duration(300)
  288. .ease(d3.easeLinear)
  289. .style('font-size', '0px');
  290. });
  291. }
  292. });
  293.  
  294. function showCircle(transition, r){
  295. transition.attr("r", r);
  296. }
  297.  
  298. }
  299.  
  300.  
  301. goBack(){
  302. this.props.history.goBack()
  303. };
  304.  
  305.  
  306.  
  307. render(){
  308. return(
  309. <div className="map_strategy">
  310. <Logo/>
  311. <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 1080">
  312.  
  313.  
  314. <path className="path_digital_studio" fill="none" d="M788.6,255.2c-13,17.6-23.9,36.7-32.6,56.8c-8.6,20-14.9,40.9-18.6,62.4c-3.6,21.5-4.5,43.4-2.8,65.2c7.4,88.2,57,167.3,133.2,212.3c19,11.2,39.3,19.9,60.5,26.1c41.8,11.8,85.8,13.7,128.5,5.6c21.6-4.2,42.5-11.1,62.4-20.5 M788.1,255.7c19.6-25.1,22.3-27,45.6-46.6"/>
  315. <path className="path_digital_studio" fill="none" d="M711.9,224.2c-69.6,104.7-80.5,243.4-16.2,361.5c48,88.4,131.8,151.8,229.8,174.2"/>
  316. <path className="path_digital_studio" fill="none" d="M640,677.5c30.5,42.3,68,79.2,110.8,109c42.8,30.1,90.8,52.2,141.5,65.2c25,6.5,50.6,10.8,76.4,13c52,4.7,104.3,0,154.6-14"/>
  317. <path className="path_digital_studio" fill="none" d="M688.5,103.9c-37.2,36.8-67.5,80.1-89.4,127.6c-10.8,23.7-19.6,48.3-26.1,73.6c-12.9,50.4-17.3,102.7-13,154.6c4.7,52,18.6,102.8,41,149.9"/>
  318. <path className="path_digital_studio" fill="none" d="M892.4,571.4L750.9,786.5"/>
  319. <path className="path_digital_studio" fill="none" d="M863.6,291l-175-187.2"/>
  320. <path className="path_digital_studio" fill="none" d="M964.1,604c-12.7,52.1-25.4,104.3-38.2,156.5"/>
  321. <path className="path_digital_studio" fill="none" d="M815.6,437.7l-81,1.9"/>
  322.  
  323.  
  324. <path className="path_branding_studio" fill="none" d="M1061.5,154.6c145.8,32.1,237.9,176.2,205.9,322c-10.2,46.3-32.4,89.1-64.3,124.1"/>
  325. <path className="path_branding_studio" fill="none" d="M1240.3,677.1c143.1-130.1,153.6-351.5,23.5-494.6C1195.9,107.8,1099,66.1,998.1,68"/>
  326. <path className="path_branding_studio" fill="none" d="M1004.2,228.6c-2.2-53.4-4.3-106.8-6.5-160.2"/>
  327. <path className="path_branding_studio" fill="none" d="M1183.9,360l77.3-23.3"/>
  328.  
  329.  
  330. <g>
  331. <path className="path_digital_studio" fill="none" stroke="#E35D14" d="M1061.9,479.3c-33.5,32.1-86.8,30.9-118.8-2.7c-32.1-33.5-30.9-86.8,2.7-118.8c4.2-4,8.8-7.6,13.8-10.7c2.7,5,4.4,10.7,6.3,17.1c2.5,8.4,5.4,17.9,11.4,28.5c9.5,16.5,20.2,24.3,32.6,33.2c4.4,3.1,8.9,6.4,13.6,10.3C1038.4,448.5,1051.4,463,1061.9,479.3z"/>
  332. <text x="980" y="450">Digital</text>
  333. <text x="980" y="470">Studio</text>
  334. </g>
  335. <g>
  336. <path className="path_branding_studio" fill="none" stroke="white" d="M1087.9,418.5c0,21.3-8.1,41.8-22.6,57.4c-10.7-16.3-23.8-30.9-38.9-43.4c-4.8-3.9-9.4-7.2-13.8-10.4c-12-8.6-22.3-16.1-31.3-31.8c-5.8-10.1-8.5-19.3-11-27.5c-2-6.5-3.8-12.6-6.8-18.1c40.7-22.3,91.8-7.3,114.1,33.4C1084.3,390.5,1087.9,404.4,1087.9,418.5z"/>
  337. <text x="1030" y="390">Branding</text>
  338. <text x="1030" y="410">Studio</text>
  339. </g>
  340.  
  341. <g className="W1 pack">
  342. <circle cx="1081.3" cy="245.5" r="0"/> {/* W1 */}
  343. <text x="1081.3" y="245.5">Упаковка</text>
  344. </g>
  345. <g className="W1 photo">
  346. <circle cx="1145" cy="292" r="0"/> {/* W1 */}
  347. <text x="1145" y="292">Фотографии</text>
  348. </g>
  349. <g className="W1 strbrand">
  350. <circle cx="1184.2" cy="360.4" r="0"/> {/* W1 5*/}
  351. <text x="1184.2" y="360.4">Стратегия бренда</text>
  352. </g>
  353. <g className="W1 graphics">
  354. <circle cx="1192.3" cy="438.8" r="0"/> {/* W1 */}
  355. <text x="1192.3" y="438.8">Графический дизайн</text>
  356. </g>
  357. <g className="W1 copywriting">
  358. <circle cx="1167.8" cy="513.7" r="0"/> {/* W1 */}
  359. <text x="1167.8" y="513.7">Творческий копирайтинг</text>
  360. </g>
  361. <g className="W1 chancery">
  362. <circle cx="1114.9" cy="572.1" r="0"/> {/* W1 */}
  363. <text x="1114.9" y="572.1">Дизайн канцелярии</text>
  364. </g>
  365. <g className="W1 branding">
  366. <circle cx="1004.3" cy="229" r="0"/> {/* W1 6 */}
  367. <text x="1004.3" y="229">Брендинг</text>
  368. </g>
  369. <g className="W1 video">
  370. <circle cx="927.1" cy="245.2" r="0"/> {/* W1 */}
  371. <text x="927.1" y="245.2">Видео</text>
  372. </g>
  373.  
  374.  
  375. <g className="W2 strbrand">
  376. <circle cx="1203" cy="600.6" r="0"/> {/* W2 */}
  377. <text x="1203" y="600.6">Характеристика ЦА</text>
  378. </g>
  379. <g className="W2 strbrand">
  380. <circle cx="1267.4" cy="476.6" r="0"/> {/* W2 */}
  381. <text x="1267.4" y="476.6">Анализ аналогов</text>
  382. </g>
  383. <g className="W2 strbrand">
  384. <circle cx="1261.1" cy="337" r="0"/> {/* W2 */}
  385. <text x="1261.1" y="337">Ценообразование</text>
  386. </g>
  387. <g className="W2 strbrand">
  388. <circle cx="1185.9" cy="219.3" r="0"/> {/* W2 */}
  389. <text x="1185.9" y="219.3">Политика продаж</text>
  390. </g>
  391. <g className="W2 strbrand">
  392. <circle cx="1061.9" cy="155" r="0"/> {/* W2 */}
  393. <text x="1061.9" y="155">Стратегия продвижения</text>
  394. </g>
  395. <g className="W3 branding">
  396. <circle cx="1161.6" cy="105.4" r="0"/> {/* W3 */}
  397. <text x="1161.6" y="105.4">Позиционирование бренда</text>
  398. </g>
  399. <g className="W3 branding">
  400. <circle cx="1289" cy="214.6" r="0"/> {/* W3 */}
  401. <text x="1289" y="214.6">Описание ценностей продукта</text>
  402. </g>
  403. <g className="W3 branding">
  404. <circle cx="1351.1" cy="370.5" r="0"/> {/* W3 */}
  405. <text x="1351.1" y="370.5">Нейминг</text>
  406. </g>
  407. <g className="W3 branding">
  408. <circle cx="1333.7" cy="537.4" r="0"/> {/* W3 */}
  409. <text x="1333.7" y="537.4">Упаковка</text>
  410. </g>
  411. <g className="W3 branding">
  412. <circle cx="1240.7" cy="677" r="0"/> {/* W3 */}
  413. <text x="1240.7" y="677">Фирменный стиль</text>
  414. </g>
  415. <g className="W3 branding">
  416. <circle cx="998" cy="68" r="0"/> {/* W3 */}
  417. <text x="998" y="68">Брендбук и пр.</text>
  418. </g>
  419.  
  420.  
  421.  
  422. <g className="O1 content">
  423. <circle cx="1042.8" cy="604" r="0"/> {/* O1 */}
  424. <text x="1042.8" y="604">Создание контента</text>
  425. </g>
  426. <g className="O1 seo">
  427. <circle cx="964" cy="603.8" r="0"/> {/* O1 6*/}
  428. <text x="964" y="603.8">SEO</text>
  429. </g>
  430. <g className="O1 web">
  431. <circle cx="892.1" cy="571.6" r="0"/> {/* O1 8*/}
  432. <text x="892.1" y="571.6">Web-разработка</text>
  433. </g>
  434. <g className="O1 application">
  435. <circle cx="839.5" cy="512.9" r="0"/> {/* O1 */}
  436. <text x="839.5" y="512.9">Разработка приложений</text>
  437. </g>
  438. <g className="O1 digital">
  439. <circle cx="815.3" cy="437.9" r="0"/> {/* O1 13*/}
  440. <text x="815.3" y="437.9">Digtal стратегия</text>
  441. </g>
  442. <g className="O1 hosting">
  443. <circle cx="824" cy="360.2" r="0"/> {/* O1 */}
  444. <text x="824" y="360.2">Web-хостинг</text>
  445. </g>
  446. <g className="O1 design">
  447. <circle cx="863.3" cy="291.4" r="0"/> {/* O1 8 */}
  448. <text x="863.3" y="291.4">Дизайн</text>
  449. </g>
  450.  
  451.  
  452.  
  453. <g className="O2 digital">
  454. <circle cx="1118.9" cy="662.9" r="0"/> {/* O2 */}
  455. <text x="1118.9" y="662.9">Целевая аудитория</text>
  456. </g>
  457. <g className="O2 digital">
  458. <circle cx="1057.1" cy="683.3" r="0"/> {/* O2 */}
  459. <text x="1057.1" y="683.3">УТП</text>
  460. </g>
  461. <g className="O2 digital">
  462. <circle cx="992.1" cy="688.3" r="0"/> {/* O2 */}
  463. <text x="992.1" y="688.3">Анализ конкурентов</text>
  464. </g>
  465. <g className="O2 digital">
  466. <circle cx="927.9" cy="677.7" r="0"/> {/* O2 */}
  467. <text x="927.9" y="677.7">Usability</text>
  468. </g>
  469. <g className="O2 digital">
  470. <circle cx="868.1" cy="652" r="0"/> {/* O2 */}
  471. <text x="868.1" y="652">Контент-маркетинг</text>
  472. </g>
  473. <g className="O2 digital">
  474. <circle cx="816.2" cy="612.7" r="0"/> {/* O2 */}
  475. <text x="816.2" y="612.7">Контекстная реклама</text>
  476. </g>
  477. <g className="O2 digital">
  478. <circle cx="775.2" cy="562.2" r="0"/> {/* O2 */}
  479. <text x="775.2" y="562.2">SMM</text>
  480. </g>
  481. <g className="O2 digital">
  482. <circle cx="747.4" cy="503.3" r="0"/> {/* O2 */}
  483. <text x="747.4" y="503.3">SEO</text>
  484. </g>
  485. <g className="O2 digital">
  486. <circle cx="734.6" cy="439.4" r="0"/> {/* O2 */}
  487. <text x="734.6" y="439.4">YouTube продвижение</text>
  488. </g>
  489. <g className="O2 digital">
  490. <circle cx="737.4" cy="374.4" r="0"/> {/* O2 */}
  491. <text x="737.4" y="374.4">Facebook Targeting</text>
  492. </g>
  493. <g className="O2 digital">
  494. <circle cx="755.7" cy="311.9" r="0"/> {/* O2 */}
  495. <text x="755.7" y="311.9">E-mail marketing</text>
  496. </g>
  497. <g className="O2 digital">
  498. <circle cx="788.4" cy="255.6" r="0"/> {/* O2 */}
  499. <text x="788.4" y="255.6">Мессенджеры и чат-боты</text>
  500. </g>
  501. <g className="O2 digital">
  502. <circle cx="833.7" cy="208.8" r="0"/> {/* O2 */}
  503. <text x="833.7" y="208.8">Remarketing</text>
  504. </g>
  505.  
  506.  
  507. <g className="O3 seo">
  508. <circle cx="925.6" cy="760.3" r="0"/> {/* O3 */}
  509. <text x="925.6" y="760.3">Вывод из под санкций Google, Яндекс</text>
  510. </g>
  511. <g className="O3 seo">
  512. <circle cx="775.8" cy="684.8" r="0"/> {/* O3 */}
  513. <text x="775.8" y="684.8">Внутренняя оптимизация</text>
  514. </g>
  515. <g className="O3 seo">
  516. <circle cx="678.2" cy="548.3" r="0"/> {/* O3 */}
  517. <text x="678.2" y="548.3">Линкбилдинг</text>
  518. </g>
  519. <g className="O3 seo">
  520. <circle cx="655.2" cy="382.1" r="0"/> {/* O3 */}
  521. <text x="655.2" y="382.1">Разработка семантического ядра</text>
  522. </g>
  523. <g className="O3 seo">
  524. <circle cx="712" cy="224.2" r="0"/> {/* O3 */}
  525. <text x="712" y="224.2">Аудит сайта</text>
  526. </g>
  527.  
  528.  
  529. <g className="O4 web">
  530. <circle cx="1123.7" cy="850.8" r="0"/> {/* O4 */}
  531. <text x="1123.7"y="850.8">Сайт-визитка</text>
  532. </g>
  533. <g className="O4 web">
  534. <circle cx="1046.9" cy="864.7" r="0"/> {/* O4 */}
  535. <text x="1046.9" y="864.7">Лендинг</text>
  536. </g>
  537. <g className="O4 web">
  538. <circle cx="968.9" cy="865" r="0"/> {/* O4 */}
  539. <text x="968.9" y="865">Корпоративный сайт</text>
  540. </g>
  541. <g className="O4 web">
  542. <circle cx="892" cy="851.8" r="0"/> {/* O4 */}
  543. <text x="892" y="851.8">Интернет-магазин</text>
  544. </g>
  545. <g className="O4 web">
  546. <circle cx="818.5" cy="825.4" r="0"/> {/* O4 */}
  547. <text x="818.5" y="825.4">Сайт-каталог</text>
  548. </g>
  549. <g className="O4 web">
  550. <circle cx="750.8" cy="786.7" r="0"/> {/* O4 */}
  551. <text x="750.8" y="786.7">Уникальный сайт</text>
  552. </g>
  553. <g className="O4 web">
  554. <circle cx="690.8" cy="736.8" r="0"/> {/* O4 */}
  555. <text x="690.8" y="736.8">Админ панель</text>
  556. </g>
  557. <g className="O4 web">
  558. <circle cx="640.4" cy="677.3" r="0"/> {/* O4 */}
  559. <text x="640.4" y="677.3">Тех. поддержка</text>
  560. </g>
  561. <g className="O4 design">
  562. <circle cx="601.1" cy="609.9" r="0"/> {/* O4 */}
  563. <text x="601.1" y="609.9">Дизайн сайта</text>
  564. </g>
  565. <g className="O4 design">
  566. <circle cx="574.1" cy="536.7" r="0"/> {/* O4 */}
  567. <text x="574.1" y="536.7">UI/UX</text>
  568. </g>
  569. <g className="O4 design">
  570. <circle cx="560.2" cy="459.9" r="0"/> {/* O4 */}
  571. <text x="560.2" y="459.9">Дизайн анимаций</text>
  572. </g>
  573. <g className="O4 design">
  574. <circle cx="559.9" cy="381.9" r="0"/> {/* O4 */}
  575. <text x="559.9" y="381.9">Создание логотипа</text>
  576. </g>
  577. <g className="O4 design">
  578. <circle cx="573.1" cy="305" r="0"/> {/* O4 */}
  579. <text x="573.1" y="305">Дизайн канцелярии</text>
  580. </g>
  581. <g className="O4 design">
  582. <circle cx="599.5" cy="231.6" r="0"/> {/* O4 */}
  583. <text x="599.5" y="231.6">Книжные макеты и иллюстрации</text>
  584. </g>
  585. <g className="O4 design">
  586. <circle cx="638.2" cy="163.8" r="0"/> {/* O4 */}
  587. <text x="638.2" y="163.8">Дизайн полиграфии</text>
  588. </g>
  589. <g className="O4 design">
  590. <circle cx="688.1" cy="103.8" r="0"/> {/* O4 */}
  591. <text x="688.1" y="103.8">Сувенирная продукция</text>
  592. </g>
  593.  
  594. </svg>
  595.  
  596. <Socials/>
  597. </div>)
  598. }
  599. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!