??? CSS?? 32?? API ?? ??? ????? ?? ???? ?? ?????

CSS??? 16??? ?? ???? ?? ??? ?? ??? ?? ???? (JavaScript ??) API ?? ???? ?? ?? ? ??? ??? ? ??? ?????...

??? ??? ??? ??? ??? ? ??? ? ???? ??????.
2?? ??? 16??32??? ?? ? ???? ????.

??? ?? 512??? SVG? ??

??? ? ??? ??? ? ?? ??? ????? -

"??? ?? ??? ?? ?? ??? ?????? ??? ? ??? ?????"

??? ?? ?? ??? ???? ???? ??? ??? ??? ??? ? ???? ?? ??? ?? ??????... ?? ?? ??? ??? ??? ????? ???? ????.

?? ???? ?? ?? ?? ?? ?? ????? ??? ??? ???? ??? ???? ?? ??? ??????. svg, webp, apng, gif, ??? ??? ??? ??????? ?? ? ?????.

??? SVG? ?? ?????.

??? CSS, ??? ??, ??? ??, ? ?? ??? ??? ???? ??? SVG ????? ??? ???? ???? ????? ?? ????? ????? ?? ??? ?????. ???? ? ? ?????. ?? ?? ??? ?????.

??? ??? ??? ?? ??? ????...

...viewBox? ?????? ???? ? ? ?? ???? ????... ?? ?????? ??????

vvv
?????!!
^^^

??? ?? ??

?? ??? ?? svg ??? ?? ? ?? ??? ???? ?? ?? svg? ??? ???? ????? ?? 0px x 0px? ?????? ????. ???? ?? ???? ? ?? ??? ?????.

??? PreserveAspectRatio? ???? ??????... ??? 0x0???... ??? CSS?? ??? 10px? ???? viewBox? ??? ???? ??? ?? ??? ????? ????. SVG? ??? ?????) aaand... ?? ???? html ??? ?? ???? ?????.

:3

???? ??? ?? ?? ?? 32??? ???? ??? ?????. ? ??? ??? ? ?? ?? ??? ???? ?????.

???! ?? ? 2??? ????? ? ?? ??? ??? ???? ??? ??? ? ?? ???? ?????.

?? ???!

SVG?? ?????? ???? ????? ?? ?? ? ?? ?? ?? ??? ?? ? ????? ???? ? ?? ????? SVG? ??????.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

(? PHP? ??????! - ?? ? ? ?? ??? ??? ? ??? ??? ??? PHP? ?? ??? ? ??? ??????.... ??? JavaScript? ??? ?? ?? ??? ????? ???? ?? ?????. ??? ???? ??? ?? ??? ? ? ?? ?? ??? ???? ?? ?? ?? ??, ??? ? ??? ???? ?? ?????. ??)

?? ?? ???? ? ?? % CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.? ???? CSS? SVG? ?? ?? size --vars? ???? ???? ?? ???????.

??! ?? ??? ?? ? ????. ?? ?? ????? ???? tan(atan2()) ?? ?? ?-???? ?? ??? ???? ???.

? CPU? ????? ??? ???? ????? CPU? ???? ???.

????? 1?? ??? ????? ???? ??

?? ??? ? ???? ??? ???? ????. ??? ?? ??? ??? ????? ???? ???... ??? ??? ??? ? ??? 16?? ?? ?? ??? ?????

CPU Hack? ???? CSS? ?? ??? ? ?? ?? --var? ?? ?? ???? ?? ?????? ?? ?? ????? ??? ? ??? ?? ?? ???? CSS? ???? ??? ???? ?????. ????? ??? ??? ?? ??? 1D? ??? ? ????

???? ??? ?????!

??? ?? ??? 16??? ???? ??? ??? ???? ?? ??? ??? 16??? ??? ??? ????. ??? ??? ??? ??? ? ?? ?? ? ????. css-api-fetch? 65535(16?? ???)?? ?? ?? ?? 99999??? ?? ??? ? ?? ??? ?????.

?? ??? ??? ? ?? ??????

?? ??? ??? ? ????

???? ? ?? ????? ??? ??, ? ?? ?? ?? ???? ?? ?? ??? ?????. ?? ?? 512??? ??? ??? ??????. ??? SVG ??????? ?? 32?? 16?? ??? ???? ? ??? ??? ???? ??? ???...

CPU? ??? ???? SVG ?????? ?? ??? ??? ???? ??? ?? ? ????. ?? ??? ?? ?? ?? ??? ?? ? ? ?? ??? ????? ?? ?????. ??? ?? "??? ??? ?" ??? ?? ??? ???(CSS nth-* ???? ?? 1 ??)? ??? ??? ???? ?? ???? ?? ???? ???? ?? ?? ?? ?? ?? ??? ??? ?????.

??? ?? -> ??? -> ??? ??? -> ???...

?? ?? ??? ?? ?????, ????? ??? 1? ??? ? ? ? ????.

??? ?? ??? ????? ???? ??? ??? ??? ??? ???? ????? ??? ? ? ?????

???? ??? ??? ???? ??, ???? ???? ???? ?? ?? ??? ??????! ??? ? ?? ??? ???? ?? ?? ?? ???? ?????.

??? ???? ??

css-bin-bits? ???? ?? ???? XOR? ? ??? ? ???? ?? ???? ???? ????. CSS?? ???? ??? ? ?? ??? ???????.

????? 16?? ?? 256(???? ??)?? ??? ?? 16?? ?? 256?? ??? ??? ?? ???? ?? ???? ????. 8?? ?? ??? 9??? ???. ?? ???? ??? ?? ???? ????? ?? ? ??? ??? ?????.

?? ???? 16???? ???? ???? ?? 16?? ??? ?? ??? ???? ?? ?? ??? ?????(??). 32?? ?.

??? ??? ????? ?? ??? ??? ??? ???? ??? ?? ??? ?? ? ? ???? ?? ??? ??? ?????.

16?? ?? 32? ??? 16?? ??? ? 22??? ???. ?? ???? ???? ??? 11??? ??? ???? ?? ?? ?? ???? ??? ???? 12??? ?????.

????? ????... ??? ??? ???? ?? ???? SVG? ?? ??? ???? ??? ? ?? ???? ?? ??? ????? ???... ??? ???? ?? ???? ?????. ??? ???? ??? ??? ???? ????? ?????. ?? ??? ??(??? ????? 16?? ?? ?)? 32? ????? 12??? ?? ?? ???? 16??? ?? ????. ??!

_{????: ?? ? ??? ????? CSS? ? 21?? ???? ??? ???? ?? ???? ??? ????? ? ?? ? ?? ??? ????? ??????. ?? ?? ??? ?? ???? alg? ?????.}

????? ??? ??? ??? ???? ? ???? ??????? ?? ???? ?? ???? ??? ??? ???? ? ?????? ??? ???? ????. >???

? ?? ?, ??? ??? ?? ?? ?? ???? ?? ?? ???? ??? ?????(SVG ?????? ???? ??? ???? ????? ? ?? ???).

34?? ??????. SVG viewBox ??? 0? ? ? ??? CSS? 0? ????? ???? ???? ??? ?????? ??? ?? ? ???? 35?? ???? ?? 0? ????? ???? ???? ??? ?????.

?? ?? ??? ???? 35?? ?? ???? SVG? ?????. ?? ? ??? ??? ?? viewbox ?? 35? ?????. ???? ???? SVG ?????? viewBox ??? 0 ~ 34(0 ????) ?? ??? ??? SVG ?????? ?? ???? ???? ??? ???? ?????.

CSS ???? ?? ???? 34?? ?? ???? ?????? ??? 35? ??, 35?? ??? ??????.

CSS? 512?? ?? ??

SVG ?????? ????? ???? ?? PHP ?? ?? ? ? ?? ????? ?? CSS? ???? ???? ??? ??????.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

CSS?? ?? ??? ? ?? ? ?? ??? ??? ?? ??? ????? ? ?? ??? ??? ? ????.

? ?? ?? ??? ????? ?? ????. ?? ???? ?? ? ????? ???? ??? ??? ???? ???? ????. ??? ??? ???? ?? ??? ??? ??? ?? ?? ???? ?? ?? ??? ?? ??????. ???? :root? ?? 40?? ?????? ?? ????.

??? ??????.

??? ???? ?, ?? ??? ???? ?? ??? ?? ?? ????? ???? ??? ??? ??? ???? ? ? ?? ?? ????, ??? ??? ? ????? ??????. ?? ?? ???? ???? ?? ??? ?? ?? ??? ?? ? 6?? CSS ??????? ????? ?? ??????.

?? ??? ??? ?????. ??? ??? ??? ?????.

??? ???? ?? ?? ??? ???? ? % CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.? ?????.

?? ?? ???? ??? ??? 4?? html ??? ??? ?? ?? ???? 4?? ? ??? ??? ??? ??? CSS ??? ?? ?????. ??? :root? ??? ??? ???? ?? ??? ??? ??? ? ????.

???? ??? ???? % CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.? ? ???? ?? ??? ??? ???? ?? ??? ???? ?????.

??? ??? ??? ?? ? ??? ???? ???? ?? ?? ??? ?????.

(256??? ???? ???? '35' ?? '20'? ????)

??? ????? ??? ???????. ? ???? ? ???? ??? ?? ??? ??????? "??"?? ?? ???? ??? ??? ? ??? ??? ? ??? ?? ???? ???? ??? ? ????. ?? ???? ????? ?????. ?? ?? ?? ? ???? ?? ??? ???? ?? ?? ???? ?? ? ?? ??(:root)?? ?? ?????.

??? ?? ?????(?? ?? ?? ?? ??? ??? ??)

CSS? 512?? ??

?? ???? ?? ???? ?? ??:

256 ??? -> 512 ??

??? ??? ?????? ??? ?????, ????? ??? ? ??? ??? ? ??? ????.

???? ?? ? ??????? ?? ??? ?? ?? ?? ??? ????. ?? ?? ?? ??? ???? ?????.

??? ?? ????? ??? ???? ?? ??? ??? ?? ?? ? ??? ? ??? ??? ??? ????? ????????.

?? ????

? ??? ? ??? 4?? ???? ?? ?? ?????? ????. ?? ?? ???? ?????.

?? ???? ?? ??? ??? ??? DOM ??? ?? ??? ???? ???(???? ??)? ???? ? ?? ??? ????? ????. ?? ????? ???? ? ??? ???? ??? ???? ????. ??? ? ??? ?? ?????? ?? ???? ???? ???? ? ????. ???? ?? ?? ?? ???? ?? ??? ??? ?? ?? ? ??? ?? ?????. ?? ??? ??? ??????.

(??? ??? ?? ???? ??? ?? ??? ?? ?? ??)

???? ??? ???? ? ?? ???? ??? ????.

--xfl-cpu-phase - ?? ?? ?? CPU ?? ??? ???? ?? ? 0~4???. (CPU Hack? ?? '???'? 4~5?? CSS ?? ?????, ??? ??? ??? CPU Hack? '?'???.) ?? ???? ? ??? ????? ? ????? ???????.

--xfl-raw-data - SVG? ????? ??? ?? ??? SVG? ??? ??????. ??? ?? ???. ??? ???? ? ?? 35?? ??? SVG ?????? ? ?? ??? ?? ????. 34?? ? ?? SVG ?????? ? ?? ??? 16?? ? 35??, ?? ?? ???? ??? ??? ?????.

--xfl-data-type - ?? ??? ??? ????. ? ?? ?? ???? ?? ??? ???? ????. --xfl-raw-data ???? ? ? ???? 1 CSS ??? ??? ????.

--xfl-data-value - ?? ??? 35? ? ?? ?? ??? ????. ???? ? ??? ?? ???? ?? ?? 0???. --xfl-data-type ???? ? ? ???? 1 CSS ??? ??? ????.

?? ??? ?? ????? ???? ?? ?? ????? SVG? ???? ???? svg-animation-current-state-reporter? ????? ??????. (??? ?? ?? ??? ????? ???? ???? ???? ??? ????? SVG? ????? ?????.)

???? ?? ?? ??? ??? ?? ??? 0?? ?????. ??? ? ????? ??? ???????. Uno Reverse ?? ???? ?????.

CPU ???

???? CPU ??? ?? ?? ???? ?????

CPU Hack ???? ?? ? ???? ?????? ???? ?? ?? ?? ??? ??? ????.

????(??? ??) ????? 1?? ?? --xfl\1? ?? ?? ?? ???? ??? ?? ?? ? ???? ?????? ?????.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

?? ?? ? CPU ?????? ????? .cpu-exfiltrator ???? ?? ??? ?????. ??? ? ? ??? ???? ???????.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

Chrome??? ? ?????? ??? ???? ?? ? ???? ??(???? ?)?? ????. ?? ?? ??? ???? ?? ??? ?????? ???? ?? ???? ??????.

????? CPU Hack? ??? ?? ??? ???? ????(?? ?????? ??? ???? ?? ???? ??? ??? ??) --xfl-cpu-phase var? ?????. ????(??? ?? ??? ?????? ??? ??? ???? ?? ??? ? ??) ?????? ?? ??? ??? ? ????.

?? ??? ?? ? ?? ??? --cpu-next-phase? ???? ? ??? ???? ??? ???? --xfl-cpu-phase? ?? ?? ?? ?????.

?? --xfl-data-type?? SVG ????? ??? ????? ?? ??? CPU Hack? ?? ?? ??? ???? ?? ??? ??????

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

(??? ??? ??? ??? ?? 0??? ?? ??? ???? ?? CPU ??? ???? ???. ??? ?? ???? ??? ?? ??? ??? ??? ???? ????. 0???? ??? ???????)

??? ???? ?? ??? ??? CPU ?? 1? ???? ??? ??? ??? ??? ?????. ??? ??? ??(???)? ??? ??? ?(?? - 35)? ??? ??? CPU ??? ?? ??? ??? ???. ??? Abraham Hicks? ???? "??? ???????".

???? SVG ?????? ??? ??? ???? 32? ?? ??? ? ??? ?? ???????.

--xfl\1? --xfl\32? ???? ?? ? ???? CPU ?????? ?????? ???? ????? ?? ??? ?? ??? ? ??? ???????.

?? CPU ??

?? CPU ??? --xfl-cpu-phase ?? ?????

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

???? ??? ??? ????? ??? ???? ???? ?? CSS ???? ????. ??? ??? ??? ????.

? ????: --xfl-cpu-phase ???;

? ?? ??? ??? ????? 100px ?? ?? ??? ???? ??? ??? ???? 0?? 4? ???? ??????? "??"?? ?????... ??? 25px? 25% ??? ????. 25%? 0?? 4 ???? 1? ?????.

_{Google ???? ???? ???? ??? ??}

????? ?????? 4 ? 0?? ????? ?? ????? ???? ?? ??? ??? ?????? ?????. ??? 25px ?? ??? 100px ?? ??? ?? ??? ????? 75% ??? ?? 75%? 4? 0 ??? ?? ? 1? ??? ?????.

??? ??? ????? ???? ?? ?????? ?? ?? 4?? ??? ?? ??? 0?? 4??? ??? ????? ????? ????? ? ????(?? ?????? ????? ?? ?? 4)??.

???? ??? ??? CPU? 0??? ???? ?? ??? ??? ?????. ?? ??? ??? 64?? ?? ????:

??? ??? = ??? ?? > 0 && ?? ??? ??? - 35 === ??? ?

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

??, === CSS???

???? ??? ??? ????? ??? ??? ? ????. ?? ?????? ???? ?? ??? ? ????. ??? ??? ??? ?????: https://codepen.io/propjockey/pen/YzZMNaz

SVG ????? ??

??? ???? ?? CPU Exfiltrator ??? ?????. ???? ?? DOM?? ????? ?(??)?? ???? ???? ???? ??? ???? ?????.

?? ??? ?? ??? ??? 3? ?? ???? ??? ?????.

On ::?? SVG? ????? ????? SVG? ?? ??? ?? ?? ??? ???? --xfl-raw-data? ???? ??. (??? 10px? ?????.)

On::--xfl-data-type ???(??? ? 0~34) ? --xfl-data-value ??(16?? ?)? ??? ?.

?? ??? SVG(?? 10px)? ???? ? ?? ?? ??? ??? ?? ?? ?(0~34)? ?? ???? ???? ???? ???.

?? ?? ??? 16?? ?( 35)? ??? ? ?? ?? ?? ?? ???. ? ?? ???? ???? 100k? ???? ??? ??? ??? 30% ?? ???? ?? ???????.

????? ???? ??? ?? ??? ?? ???? ?????.

????

.svg-animation-??-??-???

??

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

???

@keyframes capture {
  0%, 100% {
    --xfl\1-captured: var(--xfl\1);
  }
}

@keyframes hoist {
  0%, 100% {
    --xfl\1-hoist: var(--xfl\1-captured, 0);
  }
}

??? ::after gets

  --xfl\1: calc(
    var(--xfl\1-hoist, 0) + 1
  );

????? ???? ??? ?? ?? ?? ?? ??? ?? ??? ????? ?? 1px ???? ??? ? ?????. ?? ??? 1x1?? ?? ?? 0? ? 0? ????? ??? ??? ??? ?? ???? 1px? ???.

??? ?? ??? ??? ??? ?? ?????.

?? ???? ? ? ??? ??? ?? ???? ???? ?? ?? ???? ????.

  @container style(--xfl-cpu-phase: 4) {
    animation-play-state: paused, paused;
    --cpu-next-phase: calc(
      min(1, var(--xfl-data-type)) * 4
    );
  }

? ??? ???? ??? ???? ??? ??? ?? 0 ?? 1? ????? ????. ??? 1, ???? 0???. ?? ?? ??? ?? ?? ?????. false?? ??? 0?? ????, ??? ??? ?? ???? ???.

Ana Tudor? ??? ? ????? ??? ????? ??? ?????

?? ?? ? ?? ?? ?? ?? ???? ???? ??? ???? ?? ??? ? ? ???? ?? ?? ????(??? ? ?? ??? 1? ??? ??) ? ? ? ?? ???? "else"? ???. ??".

???? ?? ?? * ?? ?? ?????.
??? ???? * ? ??? ?? ?????

??? ??? ?? ??? ? ?? ?? SVG ?????? ?? ?? ?? ?? ??? ?? ???? ?????.

?? ???? CSS ??? ?? ??? ??? --xfl\... ?? ??? ? ?? ?? ?? 191?? ??? ?????.
@property --xfl\1 { ??: ""; ???: 0; ??: ??; }
...
?? ????? ???? ????:

?? CSS --var ? ??(??? ??)

?? ?? ??? ?? --xfl\1, 2, 32 ?? ???? ??? ??? ?????.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

--xfl-data-type? 1? ??? --xfl-set\1? ????. ???? else 0? ?? --xfl-data-is-ready? ?????.

--xfl-data-is-ready? 1??? ??? ??? 0??? ???? ???? ?? ???????.

?, ??? ??? && ???? ????. ????? ? ??? ?? 1??? ???.

?? ?? --xfl-set\1? --xfl-data-value(?? SVG ????? ?)? ???? ??? --xfl\1? ?? ????. ??? ??? --xfl-set\1? --? ?????. xfl\1-hoist(CPU ?? --xfl1? ?? ???? ?? ?? ?)

?? ?? ????? ??? ??? ?? ??? ?????.

??? ??? ?? calc() ? mod() ??? ???? ?? ??? ?? ???? ??? ?? ??? ??? === SVG ?????? ??? ???? CPU Hack? ???? ???? ? ? ??? ?? ????. ???. ? ??? ?????.

?? ??? ???. :)

??: CSS ????? SVG ?? ??

? ??? ?? ??? ??? ??? ??? ???? ??? ??? ?? ?? ??????? ??? ??? ?????. 2000? ??? HTML? 400? ??? CSS. ??? ?? css-bin-bits? ???? ? ????? ???? ??? ???? ????.

(??? ??? ??? ??? ???? ????? ????? ???? ? ????!)

??????? ????!

???? ???????

? ??? ????? ???? ? ??? ???? ??? ?????! ?? ??? ??? ??????.

% CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.	% CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.	DEV Blog	% CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.	% CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.

?@JaneOri.% CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.

?@Jane0ri

? ??? % CSS: ????? SVG? ??? ?? ?? ??? ??? ???? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!