{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7simb"},{"data":{"image":{"id":"651ef6c6ef9325769f9a540e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f9sdf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bg745"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете воспользоваться кодом ниже, чтобы создать анимацию перетекающего фона на HTML, CSS и JavaScript.","type":"unstyled","key":"3ak1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"header-three","key":"bjci3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

click

","type":"unstyled","key":"crlbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"38qhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aivrk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5l4db"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS","type":"header-three","key":"1eomo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":":root {","type":"unstyled","key":"186ee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--bgtime: 160s;","type":"unstyled","key":"dlqct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* brand hues */","type":"unstyled","key":"cvpso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--brand-h: 341.6;","type":"unstyled","key":"4e2j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--indigo-h: 222.2;","type":"unstyled","key":"fdhik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--navy-h: 210.9;","type":"unstyled","key":"49fi9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--teal-h: 184.9;","type":"unstyled","key":"ev64e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--brown-h: 356.3;","type":"unstyled","key":"fjbiq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--salmon-h: 7.8;","type":"unstyled","key":"3avio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--dark-h: 210;","type":"unstyled","key":"4d2c1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--base1-h: 165;","type":"unstyled","key":"4e5is"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--base2-h: 195;","type":"unstyled","key":"do9h7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* compiled defaults */","type":"unstyled","key":"tn5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--bg: hsl(0, 0%, 100%);","type":"unstyled","key":"frepc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--fg: hsl(0, 0%, 0%);","type":"unstyled","key":"gjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--brand: hsl(var(--brand-h), 100%, 44.7%);","type":"unstyled","key":"9uebq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--indigo: hsl(var(--indigo-h), 37.4%, 19.4%);","type":"unstyled","key":"188ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--navy: hsl(var(--navy-h), 49.7%, 39%);","type":"unstyled","key":"cigoe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--teal: hsl(var(--teal-h), 19.4%, 62.5%);","type":"unstyled","key":"28br3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--brown: hsl(var(--brown-h), 13.1%, 23.9%);","type":"unstyled","key":"qbdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--salmon: hsl(var(--salmon-h), 100%, 72.7%);","type":"unstyled","key":"7sth6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--dark: hsl(var(--dark-h), 33.3%, 9.4%);","type":"unstyled","key":"fgsqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--base1: hsl(var(--base1-h), 6.6%, 76.1%);","type":"unstyled","key":"bhvh0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--base2: hsl(var(--base2-h), 4.4%, 82.4%);","type":"unstyled","key":"3i39o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"9b0ms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {","type":"unstyled","key":"ci3va"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"overflow: hidden;","type":"unstyled","key":"4vugs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-color: hsl(var(--base2-h), 4.4%, 92.4%);","type":"unstyled","key":"7sreb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 100vh;","type":"unstyled","key":"1i28c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-image: linear-gradient(var(--brand) -20%, var(--indigo) 120%);","type":"unstyled","key":"bqu9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"b6urg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"svg {","type":"unstyled","key":"95tm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: fixed;","type":"unstyled","key":"7758s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"top: 0;","type":"unstyled","key":"c3j96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bottom: 0;","type":"unstyled","key":"1u2of"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"left: 0;","type":"unstyled","key":"1te0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"right: 0;","type":"unstyled","key":"fk637"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 100vh;","type":"unstyled","key":"dde11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100vw;","type":"unstyled","key":"4kpru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin: 0;","type":"unstyled","key":"54jgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"anjkh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#bgart circle {","type":"unstyled","key":"f9kag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fill: transparent;","type":"unstyled","key":"9o279"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"stroke: url(#bggrad);","type":"unstyled","key":"573g6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"stroke-linecap: round;","type":"unstyled","key":"2n7ed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"animation: bgmove 170s linear infinite;","type":"unstyled","key":"er3rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"42o05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#bggrad [offset=\"0%\"] {","type":"unstyled","key":"bltdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"stop-color: var(--brand);","type":"unstyled","key":"17gm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"ad110"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#bggrad [offset=\"100%\"] {","type":"unstyled","key":"8b054"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"stop-color: var(--salmon);","type":"unstyled","key":"1vsdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6ib0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes bgmove {","type":"unstyled","key":"586oi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"0% {","type":"unstyled","key":"u8ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"stroke-dashoffset: 1000;","type":"unstyled","key":"58d3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"8822f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"100% {","type":"unstyled","key":"fiddq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"stroke-dashoffset: 0;","type":"unstyled","key":"2a83c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4h12p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6tfmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".outfit-logo {","type":"unstyled","key":"ceshp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: var(--bg);","type":"unstyled","key":"847g6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mix-blend-mode: difference;","type":"unstyled","key":"5n1gu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: absolute;","type":"unstyled","key":"7hqrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: block;","type":"unstyled","key":"c102t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"top: 25vh;","type":"unstyled","key":"artvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"left: 25vw;","type":"unstyled","key":"a1ukp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 50vw;","type":"unstyled","key":"em9dn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 50vh;","type":"unstyled","key":"ao8u7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"pointer-events: none;","type":"unstyled","key":"d17ij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"2h6ee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p {","type":"unstyled","key":"56vkv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"pointer-events: none;","type":"unstyled","key":"ca1f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text-align: Center;","type":"unstyled","key":"13lfj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: white;","type":"unstyled","key":"9e0i8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-family: sans-serif;","type":"unstyled","key":"er3lm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: relative;","type":"unstyled","key":"4ft32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"z-index: 999;","type":"unstyled","key":"f28q2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"user-select: none;","type":"unstyled","key":"1di4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"bnkoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript","type":"header-three","key":"f6h3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let svg = document.getElementById(\"bgart\");","type":"unstyled","key":"9t126"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function drawCircles() {","type":"unstyled","key":"43mua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"for (i = 0; i < 5; i++) {","type":"unstyled","key":"1pi47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"circle = document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\");","type":"unstyled","key":"bg573"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"circle.setAttribute(\"r\", Math.floor(Math.random() * 900) + 30);","type":"unstyled","key":"7e2hl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"circle.setAttribute(\"cx\", Math.floor(Math.random() * 900));","type":"unstyled","key":"300gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"circle.setAttribute(\"cy\", Math.floor(Math.random() * 900));","type":"unstyled","key":"9mj6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"circle.setAttribute(\"stroke-width\", Math.floor(Math.random() * 400 + 15));","type":"unstyled","key":"87mgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function getRandomLength() {","type":"unstyled","key":"4abts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return Math.floor(Math.random() * 500 + 100);","type":"unstyled","key":"a9g7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"fb0o4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function getRandomGap() {","type":"unstyled","key":"cktr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return Math.floor(Math.random() * 500 + 900);","type":"unstyled","key":"64c56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"5jraf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"circle.setAttribute(","type":"unstyled","key":"84khl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"stroke-dasharray\",","type":"unstyled","key":"15nan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"`${getRandomLength()} ${getRandomGap()}`","type":"unstyled","key":"715l9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");","type":"unstyled","key":"e5j63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"svg.appendChild(circle);","type":"unstyled","key":"5v1a1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"9c02t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"2dj63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function removeAll() {","type":"unstyled","key":"5ohuh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"while (svg.firstChild) {","type":"unstyled","key":"1s6me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"svg.removeChild(svg.lastChild);","type":"unstyled","key":"c48kv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4v2sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4jnmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"svg.addEventListener(\"click\", function () {","type":"unstyled","key":"2ke6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"removeAll();","type":"unstyled","key":"da9ll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"drawCircles();","type":"unstyled","key":"4j0l1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"unstyled","key":"efcfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"drawCircles();","type":"unstyled","key":"fjssq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"QOKCUEEdYqFTkMbM9sdV"}],"entityMap":{}},"mentions":[]}