Custom project page colors/styles in ordinary scratch (plus more things)

MuricanStonkEmpire

and can you make the thing change font?

GarnetonScratch

Spooky_Lukey

GarnetonScratch wrote:

real

WizWazWuz

Unfortunately I don't know CSS and I am very easily confused what to do? Maybe making a video tutorial would help more?

ScodexPerson

Well, this topic grew massively when i first posted.

Legon974

<svg xmlns="http://www.w3.org/2000/svg“>
<rect x=”0“ y=”0“ width=”20“ height=”20“ fill=”#000“></rect>
<text fill=”white“ x=”10“ y=”15“ text-anchor=”middle“ font-size=”12">#1</text>
<style>
/* Blocs événements en rouge foncé */
rect,
rect {
fill: #8B0000 !important;
}
</style>
</svg>

If anyone can test this , I can’t actually.
Generated with Claude

MuricanStonkEmpire

GarnetonScratch wrote:

so true lol

MuricanStonkEmpire

fortyonegames wrote:

Also if you want those animated sprite icons/backdrops, here’s the svg code for them:

Arrow that has a pointing animation RIGHT

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 50" width="400" height="150">
  <defs>
    <linearGradient id="grad1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#EE2A7B"/>
      <stop offset="1" stop-color="#811150"/>
    </linearGradient>
  </defs>

  <!-- Single arrow -->
  <g id="arrow">
    <path fill="url(#grad1)" stroke="#fff" stroke-width="1.15"
          d="M 39.265 28.1885 C 39.265 28.1885 16.3395 28.1982 5.9275 28.1982
             C 3.2001 28.1982 0.9893 25.9869 0.9893 23.26
             C 0.9893 20.5326 3.2001 18.3222 5.9275 18.3222
             C 14.6568 18.3222 39.2382 18.312 39.2382 18.312
             C 39.2382 18.312 37.5879 16.6419 29.9746 9.0291
             C 28.046 7.1004 28.046 3.9741 29.9746 2.0459
             C 31.9042 0.1177 35.0301 0.1172 36.9583 2.0459
             C 43.1316 8.2183 54.6746 19.7626 54.6746 19.7626
             C 56.6028 21.6913 56.6028 24.818 54.6746 26.7458
             C 54.6746 26.7458 44.7133 36.7075 37.1001 44.3208
             C 35.1705 46.2504 32.0442 46.2504 30.1164 44.3208
             C 28.1877 42.3925 28.1877 39.2653 30.1164 37.3385
             C 36.2898 31.1633 39.265 28.1885 39.265 28.1885 Z"/>
  </g>

  <style>
    #arrow {
      animation: glide 2s ease-in-out infinite alternate;
    }

    @keyframes glide {
      0% { transform: translateX(0); }
      100% { transform: translateX(20px); } /* move 20px right */
    }
  </style>
</svg>

Squishing ball motion

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 46">
  <!-- Background -->
  <rect width="62" height="46" fill="black"/>

  <!-- Floor line -->
  <line x1="0" y1="41" x2="62" y2="41" stroke="gray" stroke-width="1"/>

  <!-- Bouncing ball -->
  <ellipse class="ball" cx="31" cy="36" rx="5" ry="5" fill="white"/>

  <style>
    .ball {
      transform-origin: center bottom;
      animation: bounce 1s ease-in-out infinite;
    }

    @keyframes bounce {
      0% {
        transform: translateY(0) scaleX(1) scaleY(1);
      }
      20% {
        transform: translateY(-20px) scaleX(0.8) scaleY(1.2); /* stretch while going up */
      }
      50% {
        transform: translateY(0) scaleX(1.2) scaleY(0.8);  /* squash when hitting ground */
      }
      70% {
        transform: translateY(-10px) scaleX(0.9) scaleY(1.1); /* smaller bounce */
      }
      100% {
        transform: translateY(0) scaleX(1) scaleY(1);  /* back to normal */
      }
    }
  </style>
</svg>

Rainbow scrolling background

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 46">
  <defs>
    <!-- Original gradient -->
    <linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="16%" stop-color="orange"/>
      <stop offset="33%" stop-color="yellow"/>
      <stop offset="50%" stop-color="green"/>
      <stop offset="66%" stop-color="blue"/>
      <stop offset="83%" stop-color="indigo"/>
      <stop offset="100%" stop-color="violet"/>
    </linearGradient>

    <!-- Mirrored gradient -->
    <linearGradient id="rainbow-mirror" x1="100%" y1="0%" x2="0%" y2="0%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="16%" stop-color="orange"/>
      <stop offset="33%" stop-color="yellow"/>
      <stop offset="50%" stop-color="green"/>
      <stop offset="66%" stop-color="blue"/>
      <stop offset="83%" stop-color="indigo"/>
      <stop offset="100%" stop-color="violet"/>
    </linearGradient>
  </defs>

  <!-- Three rectangles in a group -->
  <g class="scroll-group">
    <rect x="0" y="0" width="62" height="46" fill="url(#rainbow)"/>
    <rect x="62" y="0" width="62" height="46" fill="url(#rainbow-mirror)"/>
    <rect x="124" y="0" width="62" height="46" fill="url(#rainbow)"/>
  </g>

  <style>
    .scroll-group {
      animation: scroll 6s linear infinite;
    }

    @keyframes scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-124px); }
    }
  </style>
</svg>

Synth wave animation thingy

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 46">
  <!-- Background -->
  <rect width="62" height="46" fill="black"/>

  <!-- RED LINE -->
  <rect class="pixel red" style="--i:0" x="0" y="12"/>
  <rect class="pixel red" style="--i:1" x="4" y="12"/>
  <rect class="pixel red" style="--i:2" x="8" y="12"/>
  <rect class="pixel red" style="--i:3" x="12" y="12"/>
  <rect class="pixel red" style="--i:4" x="16" y="12"/>
  <rect class="pixel red" style="--i:5" x="20" y="12"/>
  <rect class="pixel red" style="--i:6" x="24" y="12"/>
  <rect class="pixel red" style="--i:7" x="28" y="12"/>
  <rect class="pixel red" style="--i:8" x="32" y="12"/>
  <rect class="pixel red" style="--i:9" x="36" y="12"/>
  <rect class="pixel red" style="--i:10" x="40" y="12"/>
  <rect class="pixel red" style="--i:11" x="44" y="12"/>
  <rect class="pixel red" style="--i:12" x="48" y="12"/>
  <rect class="pixel red" style="--i:13" x="52" y="12"/>
  <rect class="pixel red" style="--i:14" x="56" y="12"/>
  <rect class="pixel red" style="--i:15" x="60" y="12"/>

  <!-- GREEN LINE -->
  <rect class="pixel green" style="--i:0" x="0" y="21"/>
  <rect class="pixel green" style="--i:1" x="4" y="21"/>
  <rect class="pixel green" style="--i:2" x="8" y="21"/>
  <rect class="pixel green" style="--i:3" x="12" y="21"/>
  <rect class="pixel green" style="--i:4" x="16" y="21"/>
  <rect class="pixel green" style="--i:5" x="20" y="21"/>
  <rect class="pixel green" style="--i:6" x="24" y="21"/>
  <rect class="pixel green" style="--i:7" x="28" y="21"/>
  <rect class="pixel green" style="--i:8" x="32" y="21"/>
  <rect class="pixel green" style="--i:9" x="36" y="21"/>
  <rect class="pixel green" style="--i:10" x="40" y="21"/>
  <rect class="pixel green" style="--i:11" x="44" y="21"/>
  <rect class="pixel green" style="--i:12" x="48" y="21"/>
  <rect class="pixel green" style="--i:13" x="52" y="21"/>
  <rect class="pixel green" style="--i:14" x="56" y="21"/>
  <rect class="pixel green" style="--i:15" x="60" y="21"/>

  <!-- BLUE LINE -->
  <rect class="pixel blue" style="--i:0" x="0" y="30"/>
  <rect class="pixel blue" style="--i:1" x="4" y="30"/>
  <rect class="pixel blue" style="--i:2" x="8" y="30"/>
  <rect class="pixel blue" style="--i:3" x="12" y="30"/>
  <rect class="pixel blue" style="--i:4" x="16" y="30"/>
  <rect class="pixel blue" style="--i:5" x="20" y="30"/>
  <rect class="pixel blue" style="--i:6" x="24" y="30"/>
  <rect class="pixel blue" style="--i:7" x="28" y="30"/>
  <rect class="pixel blue" style="--i:8" x="32" y="30"/>
  <rect class="pixel blue" style="--i:9" x="36" y="30"/>
  <rect class="pixel blue" style="--i:10" x="40" y="30"/>
  <rect class="pixel blue" style="--i:11" x="44" y="30"/>
  <rect class="pixel blue" style="--i:12" x="48" y="30"/>
  <rect class="pixel blue" style="--i:13" x="52" y="30"/>
  <rect class="pixel blue" style="--i:14" x="56" y="30"/>
  <rect class="pixel blue" style="--i:15" x="60" y="30"/>

  <style>
    .pixel {
      width: 4px;
      height: 4px;
      animation: slither 2s linear infinite;
      transform-origin: center;
    }

    /* colors */
    .red { fill: red; }
    .green { fill: limegreen; }
    .blue { fill: blue; }

    /* animation */
    @keyframes slither {
      0%   { transform: translateX(0) translateY(0); }
      20%  { transform: translateX(0) translateY(-2px); }
      40%  { transform: translateX(0) translateY(0px); }
      60%  { transform: translateX(0) translateY(2px); }
      80%  { transform: translateX(0) translateY(0px); }
      100% { transform: translateX(0) translateY(0); }
    }

    .pixel:nth-child(n) {
      animation-delay: calc(var(--i) * 0.1s);
    }
  </style>
</svg>

now I need to know how you make the lightsaber text

MrMeanBean404

Would you be able to post an in-depth explanation on how this works and how to create different odd things using SVGs on YT?

fortyonegames

WizWazWuz wrote:
Unfortunately I don't know CSS and I am very easily confused what to do? Maybe making a video tutorial would help more?

The tutorial has been updated: https://scratch.mit.edu/projects/1304446771/

ChristianScratcher1

Any chance you could make a yt tutorial on this? It's easier to do when I see someone else do it first

MuricanStonkEmpire

ChristianScratcher1 wrote:
Any chance you could make a yt tutorial on this? It's easier to do when I see someone else do it first

yeah i'd agree with that too

pippy2011eight

Wait- I have an idea- what if this is used to make a 16:9 project?

ScodexPerson

pippy2011eight wrote:
Wait- I have an idea- what if this is used to make a 16:9 project?

Hmm… Interesting idea, but you can already do that with Turbowarp
sorry for offtopic :(

WizWazWuz

fortyonegames wrote:
WizWazWuz wrote:
Unfortunately I don't know CSS and I am very easily confused what to do? Maybe making a video tutorial would help more?
The tutorial has been updated: https://scratch.mit.edu/projects/1304446771/

Thanks so much! I'll try this soon.

MuricanStonkEmpire

fortyonegames wrote:
WizWazWuz wrote:
Unfortunately I don't know CSS and I am very easily confused what to do? Maybe making a video tutorial would help more?
The tutorial has been updated: https://scratch.mit.edu/projects/1304446771/

can you repost the code you had in your original post?

nembence

pippy2011eight wrote:
Wait- I have an idea- what if this is used to make a 16:9 project?

It will cause rotating things to be distorted

fortyonegames

I was trying to fix some bugs in https://scratch.mit.edu/projects/1304833192/

The original was by: @MikeyTV10

There’s some weird page highlights and what I can only describe as ghost buttons. I tried fixing it but it ended up removing the quality from it.

MuricanStonkEmpire

fortyonegames wrote:
I was trying to fix some bugs in https://scratch.mit.edu/projects/1304833192/

The original was by: @MikeyTV10

There’s some weird page highlights and what I can only describe as ghost buttons. I tried fixing it but it ended up removing the quality from it.

I don't think the synthwave works

Voxalice

MuricanStonkEmpire wrote:
(#61)
and can you make the thing change font?

Yes, you can change any element's font.

To do this, I used this CSS in the SVG that applies the long transition:

*, * *, * * *, * * * * {
    transition: all 99009900s step-end !important;
    transition-behavior: allow-discrete !important;
    /* @nembence found this trick before me */
}

I also added this CSS to the SVG that applies the styles:

*, * *, * * *, * * * * {
    font-family: "Comic Sans MS", "Papyrus", cursive, fantasy, serif;
}

Discuss Scratch