mod: Куча оптимизаций: группировки кружочков одного радиуса, переиспользование кружочков через use и т.п. Размер результирующего файла меньше на ~30-70%
This commit is contained in:
erjemin committed
1 parent
6176626ca0
commit
4dd039d6e7
7 files changed
+45
-17
No files matched your search
@@ -8,8 +8,7 @@
|
||||
Генерирует SVG халфтоновый эффект из изображения с анимацией мерцания точек.
|
||||
|
||||
Например:
|
||||
|
||||
|
||||
|
||||
|
||||
## Что делает
|
||||
|
||||
@@ -48,4 +47,4 @@ poetry run python main.py img/img_2.jpg
|
||||
или наоборот ""распустить")
|
||||
- `fill:#80000090` -- цвет точек (с прозрачностью)
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 688" width="100%" height="100%"><style>svg{background:transparent}circle{fill:#c0700090;transform-origin:center;animation:noise 1s ease-in-out infinite alternate;animation-delay:var(--d);transition:all .9s ease-out} @keyframes noise{0%{opacity:.7;transform:scale(1)}50%{opacity:1}100%{opacity:.5;transform:scale(.995)}}.frozen circle{animation:none!important;opacity:1!important;transform:none!important}.A{--d:0s}.B{--d:.2s}.C{--d:.5s}.D{--d:.8s}.E{--d:1s}.F{--d:1.2s}.G{--d:1.5s}.H{--d:1.8s}.I{--d:2s}.J{--d:2.2s}.K{--d:2.5s}.L{--d:2.8s}</style><defs><circle id="B" r="1"/><circle id="C" r="2"/><circle id="D" r="3"/><circle id="E" r="4"/><circle id="F" r="5"/><circle id="G" r="6"/><circle id="H" r="7"/></defs><g id="dots"><g class="A"><use href="#C" x="856" y="120"/><use href="#D" x="856" y="136"/><use href="#E" x="616" y="152"/><use href="#E" x="760" y="152"/><use href="#E" x="840" y="152"/><use href="#C" x="488" y="184"/><use href="#E" x="424" y="200"/><use href="#D" x="648" y="200"/><use href="#E" x="856" y="200"/><use href="#B" x="232" y="216"/><use href="#E" x="440" y="216"/><use href="#D" x="472" y="216"/><use href="#F" x="568" y="232"/><use href="#C" x="600" y="232"/><use href="#E" x="840" y="232"/><use href="#E" x="168" y="248"/><use href="#E" x="184" y="248"/><use href="#E" x="296" y="248"/><use href="#C" x="424" y="248"/><use href="#B" x="552" y="248"/><use href="#E" x="152" y="264"/><use href="#B" x="520" y="264"/><use href="#C" x="776" y="264"/><use href="#E" x="120" y="280"/><use href="#B" x="392" y="280"/><use href="#F" x="648" y="280"/><use href="#D" x="840" y="280"/><use href="#E" x="856" y="280"/><use href="#E" x="872" y="280"/><use href="#B" x="168" y="296"/><use href="#B" x="328" y="296"/><use href="#B" x="376" y="296"/><use href="#B" x="440" y="296"/><use href="#B" x="472" y="296"/><use href="#G" x="504" y="296"/><use href="#F" x="568" y="296"/><use href="#E" x="856" y="296"/><use href="#D" x="88" y="312"/><use href="#C" x="552" y="312"/><use href="#B" x="584" y="312"/><use href="#B" x="120" y="328"/><use href="#B" x="152" y="328"/><use href="#B" x="392" y="328"/><use href="#D" x="632" y="328"/><use href="#E" x="696" y="328"/><use href="#E" x="712" y="328"/><use href="#C" x="728" y="328"/><use href="#B" x="744" y="328"/><use href="#B" x="808" y="328"/><use href="#B" x="216" y="344"/><use href="#B" x="376" y="344"/><use href="#D" x="488" y="344"/><use href="#E" x="600" y="344"/><use href="#E" x="616" y="344"/><use href="#E" x="712" y="344"/><use href="#C" x="728" y="344"/><use href="#E" x="88" y="360"/><use href="#B" x="232" y="360"/><use href="#C" x="360" y="360"/><use href="#E" x="424" y="360"/><use href="#E" x="456" y="360"/><use href="#D" x="520" y="360"/><use href="#E" x="552" y="360"/><use href="#D" x="616" y="360"/><use href="#B" x="776" y="360"/><use href="#C" x="104" y="376"/><use href="#C" x="856" y="376"/><use href="#E" x="888" y="376"/><use href="#E" x="344" y="392"/><use href="#E" x="504" y="392"/><use href="#E" x="904" y="392"/><use href="#B" x="120" y="408"/><use href="#E" x="264" y="408"/><use href="#E" x="584" y="408"/><use href="#E" x="600" y="408"/><use href="#E" x="872" y="408"/><use href="#E" x="904" y="408"/><use href="#F" x="504" y="424"/><use href="#E" x="568" y="424"/><use href="#E" x="600" y="424"/><use href="#E" x="632" y="424"/><use href="#B" x="760" y="424"/><use href="#E" x="872" y="424"/><use href="#B" x="232" y="440"/><use href="#F" x="440" y="440"/><use href="#F" x="472" y="440"/><use href="#E" x="552" y="440"/><use href="#C" x="792" y="440"/><use href="#E" x="488" y="456"/><use href="#D" x="600" y="456"/><use href="#C" x="792" y="456"/><use href="#C" x="856" y="456"/><use href="#D" x="504" y="472"/><use href="#C" x="536" y="472"/><use href="#C" x="664" y="472"/><use href="#C" x="728" y="472"/><use href="#D" x="88" y="488"/><use href="#D" x="296" y="488"/><use href="#E" x="392" y="488"/><use href="#C" x="552" y="488"/><use href="#C" x="584" y="488"/><use href="#D" x="744" y="488"/><use href="#E" x="104" y="504"/><use href="#D" x="360" y="504"/><use href="#C" x="504" y="504"/><use href="#B" x="232" y="520"/><use href="#B" x="360" y="520"/><use href="#D" x="584" y="520"/><use href="#E" x="872" y="520"/><use href="#B" x="184" y="536"/><use href="#C" x="360" y="536"/><use href="#E" x="744" y="536"/><use href="#C" x="216" y="568"/><use href="#C" x="280" y="568"/><use href="#C" x="296" y="568"/><use href="#E" x="840" y="568"/><use href="#E" x="856" y="568"/><use href="#C" x="216" y="584"/><use href="#B" x="392" y="584"/><use href="#D" x="488" y="584"/><use href="#E" x="712" y="584"/><use href="#E" x="728" y="584"/><use href="#E" x="776" y="584"/><use href="#E" x="824" y="584"/><use href="#D" x="184" y="600"/><use href="#D" x="216" y="600"/><use href="#E" x="248" y="600"/><use href="#C" x="360" y="600"/><use href="#E" x="696" y="600"/><use href="#C" x="824" y="600"/><use href="#E" x="856" y="600"/><use href="#Line truncated
|
||||
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 732" width="100%" height="100%"><style>svg{background:transparent}circle{fill:#80000090;transform-origin:center;animation:noise 1s ease-in-out infinite alternate;animation-delay:var(--d);transition:all 0.5s ease-out} @keyframes noise{0%{opacity:0.7;transform:scale(1)}50%{opacity:1}100%{opacity:0.5;transform:scale(0.99)}} .frozen circle{animation:none!important;opacity:1!important;transform:none!important} .a0{--d:0.00s}.a1{--d:0.25s}.a2{--d:0.50s}.a3{--d:0.75s}.a4{--d:1.00s}.a5{--d:1.25s}.a6{--d:1.50s}.a7{--d:1.75s}.a8{--d:2.00s}.a9{--d:2.25s}.aA{--d:2.50s}.aB{--d:2.75s}</style><g id="dots"><circle cx="318" cy="30" r="3" class="a8"/><circle cx="330" cy="30" r="3" class="a8"/><circle cx="354" cy="30" r="0" class="a2"/><circle cx="294" cy="42" r="0" class="a0"/><circle cx="306" cy="42" r="4" class="a0"/><circle cx="318" cy="42" r="4" class="a7"/><circle cx="330" cy="42" r="1" class="a9"/><circle cx="342" cy="42" r="2" class="a6"/><circle cx="354" cy="42" r="3" class="a1"/><circle cx="402" cy="42" r="3" class="a4"/><circle cx="414" cy="42" r="2" class="a6"/><circle cx="282" cy="54" r="1" class="a2"/><circle cx="294" cy="54" r="5" class="a2"/><circle cx="306" cy="54" r="4" class="a8"/><circle cx="402" cy="54" r="1" class="aA"/><circle cx="414" cy="54" r="3" class="aA"/><circle cx="426" cy="54" r="4" class="a9"/><circle cx="438" cy="54" r="2" class="a7"/><circle cx="450" cy="54" r="0" class="aB"/><circle cx="270" cy="66" r="3" class="a3"/><circle cx="282" cy="66" r="5" class="a6"/><circle cx="294" cy="66" r="3" class="a1"/><circle cx="330" cy="66" r="1" class="aA"/><circle cx="438" cy="66" r="2" class="a7"/><circle cx="450" cy="66" r="3" class="a6"/><circle cx="462" cy="66" r="3" class="a4"/><circle cx="474" cy="66" r="1" class="a3"/><circle cx="246" cy="78" r="0" class="a3"/><circle cx="258" cy="78" r="3" class="a7"/><circle cx="270" cy="78" r="5" class="aA"/><circle cx="282" cy="78" r="2" class="a5"/><circle cx="306" cy="78" r="2" class="a5"/><circle cx="318" cy="78" r="4" class="a6"/><circle cx="330" cy="78" r="5" class="a7"/><circle cx="342" cy="78" r="4" class="a7"/><circle cx="354" cy="78" r="2" class="a0"/><circle cx="366" cy="78" r="1" class="a1"/><circle cx="462" cy="78" r="1" class="aA"/><circle cx="474" cy="78" r="3" class="a7"/><circle cx="486" cy="78" r="3" class="a8"/><circle cx="498" cy="78" r="2" class="aB"/><circle cx="510" cy="78" r="0" class="a3"/><circle cx="234" cy="90" r="1" class="a3"/><circle cx="246" cy="90" r="5" class="a2"/><circle cx="258" cy="90" r="5" class="a9"/><circle cx="270" cy="90" r="2" class="a8"/><circle cx="294" cy="90" r="3" class="a7"/><circle cx="306" cy="90" r="5" class="a9"/><circle cx="318" cy="90" r="5" class="a0"/><circle cx="330" cy="90" r="4" class="a5"/><circle cx="342" cy="90" r="5" class="a5"/><circle cx="354" cy="90" r="5" class="a5"/><circle cx="366" cy="90" r="5" class="a5"/><circle cx="378" cy="90" r="3" class="a5"/><circle cx="390" cy="90" r="1" class="a1"/><circle cx="486" cy="90" r="0" class="a7"/><circle cx="498" cy="90" r="2" class="a3"/><circle cx="510" cy="90" r="4" class="a0"/><circle cx="522" cy="90" r="3" class="a6"/><circle cx="534" cy="90" r="1" class="a9"/><circle cx="222" cy="102" r="3" class="a6"/><circle cx="234" cy="102" r="5" class="a6"/><circle cx="246" cy="102" r="3" class="a1"/><circle cx="258" cy="102" r="1" class="a0"/><circle cx="270" cy="102" r="1" class="a4"/><circle cx="282" cy="102" r="4" class="a0"/><circle cx="294" cy="102" r="5" class="a1"/><circle cx="306" cy="102" r="4" class="a8"/><circle cx="318" cy="102" r="4" class="aA"/><circle cx="330" cy="102" r="5" class="a2"/><circle cx="342" cy="102" r="4" class="a8"/><circle cx="354" cy="102" r="4" class="a6"/><circle cx="366" cy="102" r="4" class="a7"/><circle cx="378" cy="102" r="5" class="a2"/><circle cx="390" cy="102" r="5" class="a5"/><circle cx="402" cy="102" r="4" class="a3"/><circle cx="414" cy="102" r="2" class="a1"/><circle cx="426" cy="102" r="0" class="a4"/><circle cx="522" cy="102" r="2" class="aB"/><circle cx="534" cy="102" r="4" class="aA"/><circle cx="546" cy="102" r="3" class="a7"/><circle cx="558" cy="102" r="2" class="a1"/><circle cx="198" cy="114" r="0" class="a2"/><circle cx="210" cy="114" r="4" class="a0"/><circle cx="222" cy="114" r="5" class="aB"/><circle cx="234" cy="114" r="1" class="a8"/><circle cx="258" cy="114" r="2" class="a2"/><circle cx="270" cy="114" r="5" class="a6"/><circle cx="282" cy="114" r="5" class="a6"/><circle cx="294" cy="114" r="4" class="a9"/><circle cx="306" cy="114" r="5" class="aA"/><circle cx="318" cy="114" r="5" class="aB"/><circle cx="330" cy="114" r="5" class="aB"/><circle cx="342" cy="114" r="5" class="a3"/><circle cx="354" cy="114" r="5" class="a8"/><circle cx="366" cy="114" r="5" class="a1"/><circle cx="378" cy="114" r="4" class="a7"/><circle cx="390" cy="114" r="4" class="a7"/><circle cx="402" cy="114" r="5" class="aA"/><circle cx="414" cy="114" r="5" class="a5"/><ciLine truncated
|
||||
|
Before Width: | Height: | Size: 80 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 688" width="100%" height="100%"><style>svg{background:transparent}circle{fill:#80009090;transform-origin:center;animation:noise 1s ease-in-out infinite alternate;animation-delay:var(--d);transition:all .5s ease-out} @keyframes noise{0%{opacity:.7;transform:scale(1)}50%{opacity:1}100%{opacity:.5;transform:scale(.995)}}.frozen circle{animation:none!important;opacity:1!important;transform:none!important}.A{--d:0s}.B{--d:.2s}.C{--d:.5s}.D{--d:.8s}.E{--d:1s}.F{--d:1.2s}.G{--d:1.5s}.H{--d:1.8s}.I{--d:2s}.J{--d:2.2s}.K{--d:2.5s}.L{--d:2.8s}</style><defs><circle id="B" r="1"/><circle id="C" r="2"/><circle id="D" r="3"/><circle id="E" r="4"/><circle id="F" r="5"/><circle id="G" r="6"/><circle id="H" r="7"/></defs><g id="dots"><g class="A"><use href="#C" x="440" y="88"/><use href="#C" x="568" y="88"/><use href="#G" x="440" y="104"/><use href="#G" x="568" y="104"/><use href="#F" x="344" y="120"/><use href="#G" x="392" y="120"/><use href="#E" x="584" y="120"/><use href="#B" x="648" y="136"/><use href="#E" x="264" y="152"/><use href="#F" x="424" y="152"/><use href="#G" x="472" y="152"/><use href="#C" x="664" y="152"/><use href="#D" x="728" y="152"/><use href="#F" x="424" y="168"/><use href="#E" x="264" y="184"/><use href="#D" x="280" y="184"/><use href="#G" x="376" y="184"/><use href="#B" x="744" y="184"/><use href="#C" x="552" y="200"/><use href="#B" x="728" y="200"/><use href="#D" x="760" y="200"/><use href="#E" x="824" y="200"/><use href="#E" x="184" y="216"/><use href="#F" x="472" y="216"/><use href="#F" x="824" y="216"/><use href="#E" x="360" y="232"/><use href="#B" x="648" y="232"/><use href="#B" x="680" y="232"/><use href="#F" x="248" y="248"/><use href="#F" x="856" y="248"/><use href="#G" x="296" y="280"/><use href="#G" x="456" y="280"/><use href="#B" x="728" y="280"/><use href="#E" x="840" y="280"/><use href="#G" x="200" y="296"/><use href="#G" x="296" y="296"/><use href="#G" x="360" y="296"/><use href="#B" x="744" y="296"/><use href="#C" x="136" y="312"/><use href="#E" x="792" y="312"/><use href="#F" x="824" y="312"/><use href="#E" x="88" y="328"/><use href="#G" x="312" y="328"/><use href="#B" x="504" y="328"/><use href="#B" x="760" y="328"/><use href="#F" x="472" y="344"/><use href="#G" x="856" y="344"/><use href="#E" x="72" y="360"/><use href="#C" x="88" y="360"/><use href="#C" x="104" y="360"/><use href="#F" x="392" y="360"/><use href="#F" x="568" y="360"/><use href="#B" x="760" y="360"/><use href="#C" x="104" y="376"/><use href="#G" x="264" y="376"/><use href="#G" x="296" y="376"/><use href="#G" x="552" y="376"/><use href="#G" x="232" y="392"/><use href="#G" x="248" y="392"/><use href="#G" x="264" y="392"/><use href="#G" x="376" y="392"/><use href="#E" x="120" y="408"/><use href="#G" x="824" y="408"/><use href="#G" x="872" y="408"/><use href="#H" x="952" y="408"/><use href="#G" x="56" y="424"/><use href="#D" x="88" y="424"/><use href="#G" x="360" y="424"/><use href="#G" x="600" y="424"/><use href="#G" x="648" y="424"/><use href="#D" x="936" y="424"/><use href="#G" x="56" y="440"/><use href="#G" x="312" y="440"/><use href="#G" x="632" y="440"/><use href="#C" x="712" y="440"/><use href="#G" x="312" y="456"/><use href="#G" x="680" y="456"/><use href="#F" x="872" y="456"/><use href="#E" x="56" y="472"/><use href="#C" x="712" y="472"/><use href="#G" x="824" y="472"/><use href="#D" x="40" y="488"/><use href="#C" x="56" y="488"/><use href="#F" x="88" y="488"/><use href="#F" x="136" y="488"/><use href="#G" x="888" y="488"/><use href="#B" x="8" y="504"/><use href="#B" x="56" y="504"/><use href="#D" x="136" y="504"/><use href="#B" x="456" y="504"/><use href="#F" x="728" y="504"/><use href="#E" x="744" y="504"/><use href="#G" x="824" y="504"/><use href="#F" x="936" y="504"/><use href="#C" x="24" y="520"/><use href="#E" x="248" y="520"/><use href="#G" x="920" y="520"/><use href="#G" x="296" y="536"/><use href="#E" x="440" y="536"/><use href="#E" x="744" y="536"/><use href="#G" x="840" y="536"/><use href="#F" x="888" y="536"/><use href="#G" x="936" y="536"/><use href="#F" x="968" y="536"/><use href="#C" x="248" y="552"/><use href="#G" x="680" y="552"/><use href="#G" x="792" y="552"/><use href="#D" x="328" y="568"/><use href="#G" x="776" y="568"/><use href="#G" x="936" y="568"/><use href="#D" x="952" y="584"/><use href="#C" x="8" y="600"/><use href="#C" x="232" y="600"/><use href="#E" x="328" y="600"/><use href="#G" x="712" y="600"/><use href="#G" x="856" y="600"/><use href="#C" x="504" y="616"/><use href="#G" x="776" y="616"/><use href="#C" x="168" y="632"/><use href="#B" x="344" y="632"/><use href="#G" x="696" y="632"/><use href="#G" x="712" y="632"/><use href="#G" x="776" y="632"/><use href="#G" x="824" y="632"/><use href="#F" x="936" y="632"/><use href="#D" x="104" y="648"/><use href="#C" x="120" y="648"/><use href="#E" x="584" y="648"/><use href="#G" x="680" y="648"/><use href="#G" x="792" y="648"/><use href="#G" x="840" y="648"/><use href="#G" x="920" y="6Line truncated
|
||||
|
After Width: | Height: | Size: 50 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24310 16456" width="100%" height="100%"><style>svg{background:transparent}circle{fill:#80009090;transform-origin:center;animation:noise 1s ease-in-out infinite alternate;animation-delay:var(--d);transition:all 0.5s ease-out} @keyframes noise{0%{opacity:0.7;transform:scale(1)}50%{opacity:1}100%{opacity:0.5;transform:scale(0.99)}} .frozen circle{animation:none!important;opacity:1!important;transform:none!important} .a0{--d:0.10s}.a1{--d:0.25s}.a2{--d:0.50s}.a3{--d:0.75s}.a4{--d:1.00s}.a5{--d:1.25s}.a6{--d:1.50s}.a7{--d:1.75s}.a8{--d:2.00s}.a9{--d:2.25s}.aA{--d:2.50s}.aB{--d:2.75s}</style><g id="dots"><circle cx="10285" cy="2057" r="35" class="a5"/><circle cx="10659" cy="2057" r="58" class="a5"/><circle cx="11033" cy="2057" r="78" class="a1"/><circle cx="11407" cy="2057" r="88" class="a2"/><circle cx="11781" cy="2057" r="96" class="a7"/><circle cx="12155" cy="2057" r="99" class="a7"/><circle cx="12529" cy="2057" r="97" class="a8"/><circle cx="12903" cy="2057" r="91" class="a1"/><circle cx="13277" cy="2057" r="81" class="aA"/><circle cx="13651" cy="2057" r="58" class="a5"/><circle cx="14025" cy="2057" r="35" class="a5"/><circle cx="8789" cy="2431" r="48" class="aB"/><circle cx="9163" cy="2431" r="91" class="a6"/><circle cx="9537" cy="2431" r="127" class="aA"/><circle cx="9911" cy="2431" r="153" class="a7"/><circle cx="10285" cy="2431" r="170" class="aB"/><circle cx="10659" cy="2431" r="179" class="a4"/><circle cx="11033" cy="2431" r="181" class="a2"/><circle cx="11407" cy="2431" r="183" class="a8"/><circle cx="11781" cy="2431" r="184" class="a5"/><circle cx="12155" cy="2431" r="183" class="aA"/><circle cx="12529" cy="2431" r="185" class="a0"/><circle cx="12903" cy="2431" r="186" class="a7"/><circle cx="13277" cy="2431" r="185" class="a9"/><circle cx="13651" cy="2431" r="180" class="aA"/><circle cx="14025" cy="2431" r="173" class="a2"/><circle cx="14399" cy="2431" r="159" class="a4"/><circle cx="14773" cy="2431" r="136" class="a6"/><circle cx="15147" cy="2431" r="100" class="a5"/><circle cx="15521" cy="2431" r="64" class="a4"/><circle cx="7667" cy="2805" r="41" class="a6"/><circle cx="8041" cy="2805" r="99" class="a6"/><circle cx="8415" cy="2805" r="147" class="a5"/><circle cx="8789" cy="2805" r="173" class="a7"/><circle cx="9163" cy="2805" r="180" class="a9"/><circle cx="9537" cy="2805" r="172" class="a8"/><circle cx="9911" cy="2805" r="158" class="a6"/><circle cx="10285" cy="2805" r="145" class="a3"/><circle cx="10659" cy="2805" r="136" class="a8"/><circle cx="11033" cy="2805" r="125" class="a9"/><circle cx="11407" cy="2805" r="118" class="a2"/><circle cx="11781" cy="2805" r="114" class="aB"/><circle cx="12155" cy="2805" r="113" class="a1"/><circle cx="12529" cy="2805" r="113" class="aA"/><circle cx="12903" cy="2805" r="116" class="a4"/><circle cx="13277" cy="2805" r="123" class="a8"/><circle cx="13651" cy="2805" r="132" class="a6"/><circle cx="14025" cy="2805" r="144" class="a5"/><circle cx="14399" cy="2805" r="148" class="a0"/><circle cx="14773" cy="2805" r="137" class="aA"/><circle cx="15147" cy="2805" r="139" class="a2"/><circle cx="15521" cy="2805" r="142" class="a3"/><circle cx="15895" cy="2805" r="147" class="a0"/><circle cx="16269" cy="2805" r="125" class="a5"/><circle cx="16643" cy="2805" r="67" class="a3"/><circle cx="6919" cy="3179" r="51" class="a0"/><circle cx="7293" cy="3179" r="124" class="a8"/><circle cx="7667" cy="3179" r="168" class="a1"/><circle cx="8041" cy="3179" r="178" class="a8"/><circle cx="8415" cy="3179" r="167" class="a3"/><circle cx="8789" cy="3179" r="144" class="a1"/><circle cx="9163" cy="3179" r="118" class="aA"/><circle cx="9537" cy="3179" r="95" class="a8"/><circle cx="9911" cy="3179" r="86" class="a3"/><circle cx="10285" cy="3179" r="85" class="a4"/><circle cx="10659" cy="3179" r="88" class="a8"/><circle cx="11033" cy="3179" r="97" class="a0"/><circle cx="11407" cy="3179" r="102" class="a2"/><circle cx="11781" cy="3179" r="107" class="a2"/><circle cx="12155" cy="3179" r="108" class="a5"/><circle cx="12529" cy="3179" r="108" class="a6"/><circle cx="12903" cy="3179" r="103" class="a9"/><circle cx="13277" cy="3179" r="97" class="a5"/><circle cx="13651" cy="3179" r="87" class="a8"/><circle cx="14025" cy="3179" r="80" class="a8"/><circle cx="14399" cy="3179" r="80" class="a7"/><circle cx="14773" cy="3179" r="69" class="a0"/><circle cx="15147" cy="3179" r="55" class="a0"/><circle cx="15521" cy="3179" r="36" class="a9"/><circle cx="15895" cy="3179" r="29" class="a7"/><circle cx="16269" cy="3179" r="58" class="a6"/><circle cx="16643" cy="3179" r="97" class="a1"/><circle cx="17017" cy="3179" r="145" class="a4"/><circle cx="17391" cy="3179" r="94" class="aB"/><circle cx="6171" cy="3553" r="37" class="a8"/><circle cx="6545" cy="3553" r="122" class="a9"/><circle cx="6919" cy="3553" r="172" class="a6"/><circle cx="7293" cy="3553" r="176" class="a2"/><circle cx="7667" cy="3553" r="155" class="a5"/><circle cx="8041" cy="3553" r="121" claLine truncated
|
||||
|
Before Width: | Height: | Size: 81 KiB |
@@ -8,7 +8,7 @@ def encode_to_base36(num):
|
||||
if num < 0:
|
||||
raise ValueError("Number must be non-negative")
|
||||
|
||||
charset = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
|
||||
charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
|
||||
if num < len(charset):
|
||||
return charset[num]
|
||||
|
||||
@@ -19,8 +19,9 @@ def encode_to_base36(num):
|
||||
return ''.join(reversed(result))
|
||||
|
||||
|
||||
def generate_halftone_svg(image_path, output_path, cols=80, max_radius=6, animation_variants=12):
|
||||
def generate_halftone_svg(image_path, output_path, cols=80, max_radius=8, animation_variants=12):
|
||||
import random
|
||||
from collections import defaultdict
|
||||
|
||||
img = Image.open(image_path).convert('L')
|
||||
aspect_ratio = img.height / img.width
|
||||
@@ -31,14 +32,21 @@ def generate_halftone_svg(image_path, output_path, cols=80, max_radius=6, animat
|
||||
width = cols * step
|
||||
height = rows * step
|
||||
|
||||
svg_elements = []
|
||||
|
||||
# Генерируем CSS-классы для разных задержек
|
||||
animation_classes = []
|
||||
for i in range(animation_variants):
|
||||
delay = (i / animation_variants) * 3
|
||||
encoded_i = encode_to_base36(i)
|
||||
animation_classes.append(f".a{encoded_i}{{--d:{delay:.2f}s}}")
|
||||
# Убрать .0 для целых чисел: 1.0s → 1s
|
||||
if delay == int(delay):
|
||||
delay_str = f"{int(delay)}"
|
||||
else:
|
||||
delay_str = f"{delay:.1f}".lstrip('0')
|
||||
animation_classes.append(f".{encoded_i}{{--d:{delay_str}s}}")
|
||||
|
||||
# Собираем элементы группируя по классам: {class: [(radius, cx, cy), ...]}
|
||||
elements_by_class = defaultdict(list)
|
||||
unique_radii = set()
|
||||
|
||||
for y in range(rows):
|
||||
for x in range(cols):
|
||||
@@ -48,20 +56,41 @@ def generate_halftone_svg(image_path, output_path, cols=80, max_radius=6, animat
|
||||
if factor < 0.15:
|
||||
continue
|
||||
|
||||
radius = factor * max_radius
|
||||
radius = int(factor * max_radius)
|
||||
if radius == 0:
|
||||
continue
|
||||
|
||||
cx = x * step + step // 2
|
||||
cy = y * step + step // 2
|
||||
|
||||
# Каждой точке свой класс с уникальной задержкой
|
||||
anim_class = random.randint(0, animation_variants - 1)
|
||||
encoded_class = encode_to_base36(anim_class)
|
||||
svg_elements.append(
|
||||
f'<circle cx="{cx}" cy="{cy}" r="{int(radius)}" class="a{encoded_class}"/>'
|
||||
)
|
||||
|
||||
elements_by_class[encoded_class].append((radius, cx, cy))
|
||||
unique_radii.add(radius)
|
||||
|
||||
# Создаем <defs> с определениями кружков для каждого радиуса
|
||||
defs = '<defs>'
|
||||
for radius in sorted(unique_radii):
|
||||
encoded_radius = encode_to_base36(radius)
|
||||
defs += f'<circle id="{encoded_radius}" r="{radius}"/>'
|
||||
defs += '</defs>'
|
||||
|
||||
# Создаем группы по классам
|
||||
groups = []
|
||||
for anim_class in sorted(elements_by_class.keys()):
|
||||
group_elements = elements_by_class[anim_class]
|
||||
uses = ''.join(
|
||||
f'<use href="#{encode_to_base36(radius)}" x="{cx}" y="{cy}"/>'
|
||||
for radius, cx, cy in group_elements
|
||||
)
|
||||
if uses:
|
||||
groups.append(f'<g class="{anim_class}">{uses}</g>')
|
||||
|
||||
animation_css = "".join(animation_classes)
|
||||
groups_html = "".join(groups)
|
||||
|
||||
svg_template = f"""<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {width} {height}" width="100%" height="100%"><style>svg{{background:transparent}}circle{{fill:#80000090;transform-origin:center;animation:noise 1s ease-in-out infinite alternate;animation-delay:var(--d);transition:all 0.5s ease-out}} @keyframes noise{{0%{{opacity:0.7;transform:scale(1)}}50%{{opacity:1}}100%{{opacity:0.5;transform:scale(0.99)}}}} .frozen circle{{animation:none!important;opacity:1!important;transform:none!important}} {animation_css}</style><g id="dots">{"".join(svg_elements)}</g></svg>"""
|
||||
svg_template = f'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {width} {height}" width="100%" height="100%"><style>svg{{background:transparent}}circle{{fill:#80000090;transform-origin:center;animation:noise 1s ease-in-out infinite alternate;animation-delay:var(--d);transition:all .5s ease-out}} @keyframes noise{{0%{{opacity:.7;transform:scale(1)}}50%{{opacity:1}}100%{{opacity:.5;transform:scale(.995)}}}}.frozen circle{{animation:none!important;opacity:1!important;transform:none!important}}{animation_css}</style>{defs}<g id="dots">{groups_html}</g></svg>'''
|
||||
|
||||
with open(output_path, 'w') as f:
|
||||
f.write(svg_template)
|
||||
@@ -69,4 +98,4 @@ def generate_halftone_svg(image_path, output_path, cols=80, max_radius=6, animat
|
||||
|
||||
if __name__ == '__main__':
|
||||
file_name_in = sys.argv[-1]
|
||||
generate_halftone_svg(file_name_in, f'{file_name_in.split(".")[0]}j.svg', cols=90, max_radius=5)
|
||||
generate_halftone_svg(file_name_in, f'{file_name_in.split(".")[0]}j.svg', cols=63, max_radius=7)
|
||||
Reference in new issue
Block a user