Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
c.im is one of the many independent Mastodon servers you can use to participate in the fediverse.
C.IM is a general, mainly English-speaking Mastodon instance.

Administered by:

Server stats:

2.9K
active users

c.im: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.6

#svg

41 posts30 participants4 posts today
Public *
Timothée Goguely

Aujourd’hui je bosse sur de l’animation CSS et SVG pour un projet qui sortira bientôt, et c’est la première fois que je rencontre un cas de figure qui nécessite que j’utilise l’élément <animate> en SVG (plutôt qu’animer l’élément en CSS) : developer.mozilla.org/en-US/do

C’est supporté par tous les navigateurs et ça permet vraiment de faire des choses assez sophistiquées, puisqu’on peut animer la valeur de n’importe quel attribut d’un élément.

The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background.
MDN Web Docs<animate> - SVG: Scalable Vector Graphics | MDNThe <animate> SVG element provides a way to animate an attribute of an element over time.
#SVG
Continued thread
Public
Ana Tudor 🐯

If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.

How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?

The visual result showing four lines of text, middle aligned, each with its own semitransparent background and padding. The padding on each line leads to intersection, and where we have intersection, the semi-transparent background becomes more opaque. The CSS producing this is: ``` p > span { padding: .25em; border-radius: 5px; background: rgb(0 0 0/ var(--a, .7)); color: #fff; /* add lateral padding + border-radius to each line */ box-decoration-break: clone } ```
#CSS#SVG#filter
Public
Vector Hugo
This cute girl is our colorful interpretation of the first comic drawn on a computer, ever. We've found her in #IvanSutherland's #MIT thesis about #CAD. The #illustration was made 1963 with #Sketchpad in outlines only.
https://youtu.be/fC4nW2o-Rwk

The #vectorgraphic #illustration is made in #vividcolors and #svg with #FreeSoftware. #Vector #Art #reinterpretation realized with #Inkscape #GPL on #Linux, not #Adobe #Illustrator #Ai #IP on #OSX
Sketchpad comic vector graphic illustration
#osx
ExploreLive feeds
About